Fetch和Axios的请求对比

一、根本

Axios： 它是用于网络请求的第三方库，它是一个库；

Fetch： 是es6新增的用于网络请求标准api，它是一个api。

二、兼容性

Axios： 兼容IE浏览器；

Fetch： 在IE浏览器和一些老版本浏览器上没有受到支持，需要借助whatwg-fetch库实现，不过现在很多网站的开发都为了减少成本而选择不再兼容IE浏览器。

注意：在比较旧的浏览器上面可能还需要使用promise兼容库。

三、请求方式

Axios：

const options = {
  url: "http://example.com/",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  data: {
    a: 10,
    b: 20,
  },
};

axios(options).then((response) => {
  console.log(response.status);
});

Fetch：

const url = "http://example.com/";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};

fetch(url, options).then((response) => {
  console.log(response.status);
});

不同点: 传递数据的方式不同,

Axios是放到data属性里，以对象的方式进行传递，

Fetch是需要放在body属性中，以字符串的方式进行传递。

四、响应超时

Axios的相应超时设置是非常简单的，直接设置timeout属性就可以了

axios({
  method: "post",
  url: "http://example.com/",
  timeout: 4000, // 请求4秒无响应则会超时
  data: {
    firstName: "David",
    lastName: "Pollock",
  },
})
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

Fetch需使用AbortController属性

const controller = new AbortController();

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

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

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

五、对数据的转化

Axios会自动对数据进行转化

// axios
axios.get("http://example.com/").then(
  (response) => {
    console.log(response.data);
  },
  (error) => {
    console.log(error);
  }
);

// fetch
fetch("http://example.com/")
  .then((response) => response.json()) // 需要对响应数据进行转换
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.error(error));

Fetch提供的转化API有下面几种：

• arrayBuffer()
• blob()
• json()
• text()
• formData()

使用Fetch时你需要清楚请求后的数据类型是什么，然后再用对应的方法将它进行转换。

Fetch可以通过一些封装实现Axios的自动转化功能，至于如何实现由于我没有去研究过所以就不再这里多嘴，不过实现起来应该不难，但是要将实现过程写的健壮就需要花费一定的时间，这里就不展开说了。

六、HTTP拦截器

Axios：提供了拦截器，可以统一对请求或响应进行一些处理

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

axios.interceptors.request.use((config) => {
  // 在请求之前对请求参数进行处理
  return config;
});

// 发送GET请求
axios.get("http://example.com/").then((response) => {
  console.log(response.data);
});

Fetch: 直接重写全局Fetch方法

fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);

fetch("http://example.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

七、同时请求

Axios：

axios
  .all([
    axios.get("https://api.github.com/users/iliakan"),
    axios.get("https://api.github.com/users/taylorotwell"),
  ])
  .then(
    axios.spread((obj1, obj2) => {
      ...
    })
  );

Fetch：

Promise.all([
  fetch("https://api.github.com/users/iliakan"),
  fetch("https://api.github.com/users/taylorotwell"),
])
  .then(async ([res1, res2]) => {
    const a = await res1.json();
    const b = await res2.json();
  })
  .catch((error) => {
    console.log(error);
  });

Fetch 对浏览器原生支持，即时测试某些接口直接在Chrome浏览器中使用Fetch进行请求，尤其是编写爬虫或脚本的时候，你在当前网页打开Chrome的控制台使用Fetch几乎不需要什么配置就可以直接进行请求。