Http请求方式那回事-老K的垃圾堆

1.Ajax（原生）

Ajax 是一种使用浏览器提供的 XMLHttpRequest 对象实现的技术，用于在不刷新整个页面的情况下进行异步请求和更新页面内容。可以说 Ajax 是基于浏览器提供的 XMLHttpRequest 对象来实现的。

缺点：

兼容性问题：AJAX 的兼容性相对较低，尤其在旧版本的浏览器中可能会出现问题。而 Axios 和 Fetch API 使用了更现代的 JavaScript 特性，具有更好的兼容性。

代码冗余：使用原生的 AJAX 需要编写较多的代码来处理不同的状态码、错误处理以及请求的拼装等。而 Axios 和 Fetch API 提供了更简洁和易用的接口，减少了代码冗余。

缺乏默认配置：AJAX 不提供默认的全局配置，如请求和响应拦截器、统一的错误处理等。而 Axios 和 Fetch API 支持全局配置，并且提供了更方便的拦截器机制。

功能限制：AJAX 在处理跨域请求时需要注意添加额外的处理，比如设置 CORS 头部信息或者使用 JSONP。而 Axios 和 Fetch API 提供了更直接的方式来处理跨域请求。

可读性较差：由于 AJAX 使用的是回调函数来处理异步请求，可能会导致代码逻辑比较复杂，可读性较差，当我们需要发起多个AJAX请求，并在每个请求的回调函数中再进行下一次请求或其他操作时，就需要进行多层回调函数的嵌套，出现回调地狱现象。而 Axios 和 Fetch API 使用的是 Promise 或 async/await，使代码结构更加清晰易读。

2.Fetch

Fetch API在浏览器中原生支持，并且以 Promise 为基础，使得异步请求更加直观和易用。使用 Fetch API，可以执行各种类型的请求（如 GET、POST、PUT、DELETE 等），发送请求时可以设置请求头、请求参数，以及处理响应数据。

3.Axios

Axios 是一个基于 Promise 网络请求第三方库，用于在浏览器和 Node.js 中进行 HTTP 请求。在服务端它使用原生 node.js http 模块, 而在客户端，本质上还是对原生XMLHttpRequest的封装，只不过它是基于Promise的，符合最新的ES规范。

Fetch vs Axios

大多数人都觉得 Axios使用体验确实优于Fetch，所以对大多数人来说，Fetch的优势仅仅在于浏览器原生支持

传参方式

// Axios
axios({
    method: "GET",
    url: ".../api/id",
    params: { id: 1 }
}).then((res) => {...})

axios({
    method: "POST",
    url: ".../api/id",
    data: {
        id: 1
    }
}).then((res) => {...})

// Fetch

fetch(".../api/id?id=1", {
    "method": "GET"
}).then((res) => {...})

fetch(".../api/id", {
    method: "POST",
    headers: {
        'content-type': 'application/json'
    },
    body: JSON.stringify({
        id: 1
    })
}).then((res) => {res.json()})

拦截器

Axios拥有拦截器，可完成更多辅助操作（例如配置token，cookies，header等等）

// Axios实例
const instance: AxiosInstance = axios.create()

// 请求拦截器
instance.interceptors.request.use((config) => {
  // 请求前的操作
  return config
})

// 响应拦截器
instance.interceptors.response.use((response) => {
  // 响应前的操作
  return response
})

响应超时时间

Axios可直接设置timeout属性配置超时时间

axios({
    method: "post",
    url: ".../api/id",
    timeout: 1000,      // 请求1秒无响应则超时
    data: {
        id: 1
    }
})

数据格式化

Axios返回的数据自动JSON处理，Fetch需手动格式化

目录CONTENT

Http请求方式那回事