网络请求 | ajax axio fetch区别

AJAX

网络请求 | AJAX

AJAX的全称是：Asynchronous JavaScript AND XML 也就是异步的JavaScript 和 XML

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

特点：

局部刷新，无需重载整个页面

简单来说，XMLHttpRequest是实现AJAX的一种方式

面试常手撕手写AJXA或者用Promise封装AJAX，秉着孰能生巧的想法，再写一遍~

function myAJAX(method = 'GET', url, isAsync=true, data=null) {
    let xhr = new XMLHttpRequest();
    
    return new Promise((resolve, reject) => {
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    resolve(xhr.responseText);
                } else {
                    reject(xhr.status)
                }
            }  
        };
        xhr.open(method, url, isAsync);
        xhr.send(data);
    })
}

fetch

网络请求 | Fetch_API 基本用法

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

fetch是一个API 它是真实存在的，它是基于promise的

特点：

• 使用promise，不用回调函数
• 采用模块化设计
• 通过数据流对数据进行处理，提高网站性能

function ajaxFetch(url, options = {}) {
    fetch(url, options).then(response => response.text()
       .then(data => console.log(data)))
}

axios

axios是一个基于Promise封装的网络请求库，他是基于XHR进行的二次封装

特点：

• 从浏览器创建XMLHttpRequest
• 从node.js创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

// 示例：发送axios请求
axios({
    method: 'post',
    url: 'xxx',
    data: {
        xxx:xxx,
        xxx:xxx,
    }
})

总结

三者的关系如下图所示：

名称	解释
Ajax	JS异步的术语，一种技术统称，主要利用XHR（早期api）实现网络请求
Fetch	ES6新增的用于网络请求的标准API，基于promise
Axios	一个封装库，基于XHR封装，较为推荐使用

知识补充

网络请求 | AJAX

网络请求 | Fetch_API 基本用法

参考

MDN Fetch API

AJAX Introduction

axios API

Ajax、Fetch、Axios三者有什么区别？