[JavaScript知识库]axios与fetch

Axios是对XMLHttpRequest的封装

而Fetch是一种新的获取资源的接口方式

不同点：

传递数据

Axios是放到data属性里，以对象的方式进行传递
Fetch则是需要放在body属性中，以字符串的方式进行传递

数据转化

Axios 自动对数据进行转化
Fetch 需要手动转化 .json()

fetch("地址")
  .then((response) => response.json()) // 对响应数据转换
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.error(error));

响应超时的设置

axios

xios({
  method: "post",
  url: "地址",
  timeout: 4000, // 请求4秒无响应 超时
  data: {
    firstName: "rr",
    lastName: "xx",
  },
})
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

fetch:

const controller = new AbortController();

const options = {
  method: "POST",
  signal: controller.signal,
  body: JSON.stringify({
    firstName: "David",
    lastName: "Pollock",
  }),
};
const promise = fetch("地址", options);

// 如果4秒钟没有响应则超时
const timeoutId = setTimeout(() => controller.abort(), 4000);

promise
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

Axios 设置timeout属性 简单快捷
Fetch 使用AbortController属性，设置麻烦

http拦截器

Axios 提供了拦截器，可以统一对请求或响应进行一些处理，如为请求附加token、为请求增加时间戳防止请求缓存，以及拦截响应，一旦状态码不符合预期则直接将响应消息通过弹框的形式展示在界面上，比如密码错误、服务器内部错误、表单验证不通过等问题

Fetch 没有拦截器功能，要实现该功能需要重写全局Fetch方法
axios请求拦截器，响应拦截器

浏览器原生支持

fetch浏览器原生就支持
Axios需要引入一个包

参考：
axios fetch区别

axios fetch对比