前言

作为一个前端工作人员经常需要与后端进行数据交互，而Ajax、Fetch和Axios作为网络请求的工具，扮演着重要的角色。本文将深入介绍这三者，探讨它们的特点、使用场景以及优缺点。

Ajax (Asynchronous JavaScript and XML)

Ajax使⽹页实现异步更新，在不重新加载⽹页的情况下，对⽹页部分进行更新。Ajax并不是不是⼀种新技术，而是由XMLHttpRequest的API实现。

请求步骤

//创建 XMLHttpRequest 对象
const ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求,通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接
ajax.open('GET', url, true);
//发送信息⾄服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
ajax.send(null);
//监听服务端的通信状态，接受服务器响应数据
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 304)) {
    
    }
};

特点：

• 基于原生JavaScript开发。
• 对于简单请求足够，但在复杂场景中可能显得繁琐。
• 回调函数处理异步结果。

Fetch

fetch 是底层API，代替了XHR，基于promise实现而不是Ajax的封装

请求步骤

fetch("url") 
    .then(response => response.json()) 
    .then(data => console.log(data)) 
    .catch(error => console.error('Error:', error));

特点：

• 基于promise实现，⽀持async/await
• 提供的API丰富
• 脱离XHR
• 不携带cookie，需要⼿动添加配置项

Axios

Axios 是⼀个基于promise封装的HTTP客户端，可以⽤在浏览器和 node.js中。它本质也是对原⽣XMLHttpRequest的封装，只不过它是Promise的实现版本。

请求步骤

axios({
    url: 'xxx', // 设置请求的地址
    method: "GET", // 设置请求⽅法
    // get请求使⽤params进⾏参数凭借,如果是post请求⽤data
    params: { 
        type: '',
        page: 1
    }
}).then(res => {
    // res为后端返回的数据
    console.log(res);
})

封装请求⽅法

// get 请求
export const Getxxx(
    {
        url,
        params = {}
    }
) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params})
        .then((res) => {
            resolve(res.data)
        })
        .catch(err => {
            reject(err)
        })
    })
}

特点：

• 提供更多高级功能，如拦截器、取消请求、自动转换JSON等。
• 对错误处理和请求配置提供了更多选项。
• 需要通过npm或cdn引入，是第三方库。

如何选择

在选择使用Ajax、Fetch还是Axios时，需要考虑项目的需求和开发者的偏好：

• 简单场景： 对于简单的请求，使用原生Ajax或Fetch足够。
• 现代项目： 在现代项目中，使用Fetch可以利用Promise的优势，但需要注意处理错误和携带cookies。
• 复杂应用： 对于复杂的应用，Axios提供了更多的功能和配置选项，使其成为不错的选择。