fetch与axios区别

fetch 与 axios 的定位认识。fetch 是浏览器提供的 api，axios 是社区封装的一个组件。

fetch 是一个低层次的 API，你可以把它考虑成原生的 XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，XMLHttpRequest一直是 web 开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及 Ajax 技术的时候，通常意思就是基于XMLHttpRequest的 Ajax，它是一种能够有效改进页面通信的技术。 Ajax 的兴起是由于 Google 的 Gmail 所带动的，随后被广泛的应用到众多的 Web 产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequest作为了当前 Web 应用与远程资源进行通信的基础。 而本文将要介绍的内容则是XMLHttpRequest的最新替代技术——Fetch API， 它是 W3C 的正式标准，本文将会介绍 Fetch API 的相关知识，以及探讨它所能使用的场景和能解决的问题。

一、fetch 优势：

1. 语法简洁，更加语义化
2. 基于标准 Promise 实现，支持 async/await
3. 更加底层，提供的 API 丰富（request, response）
4. 脱离了 XHR，是 ES 规范里新的实现方式

二、fetch 存在问题

fetch 是一个低层次的 API，你可以把它考虑成原生的 XHR，所以使用起来并不是那么舒服，需要进行封装。

1. fetch 只对网络请求报错，对 400，500 都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2. fetch 默认不会带 cookie，需要添加配置项： fetch(url, {credentials: ‘include’})
3. fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4. fetch 没有办法原生监测请求的进度，而 XHR 可以

fetch("http://example.com/movies.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生 XHR 的封装，只不过它是 Promise 的实现版本，符合最新的 ES 规范，它本身具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止 CSRF
4. 提供了一些并发请求的接口（重要，方便了很多的操作）
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换 JSON 数据

// axios举例
axios
  .get("/user", {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

总结：axios 既提供了并发的封装，也没有 fetch 的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

明确考察点

1. fetch 是规范底层 api
2. axios 是封装
3. fetch 和 axios 的优缺点

回答思路

首先明确 fetch 和 axios 分别是个啥？然后阐述 fetch 和 axios 的优缺点

相关扩展

1. axios 的 github 仓库地址
2. axios 的 api 文档说明
3. fetch 的 api 规范 MDN 社区说明
4. w3c 和 whatwg

赏

谢谢你请我吃糖果