fetch与axios

fetch与axios的定位认识。fetch是浏览器提供的api，axios是社区封装的一个组件。
**fetch**  是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，`XMLHttpRequest`一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于`XMLHttpRequest`的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将`XMLHttpRequest`作为了当前Web应用与远程资源进行通信的基础。 而本文将要介绍的内容则是`XMLHttpRequest`的最新替代技术——[Fetch API](https://fetch.spec.whatwg.org/)， 它是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可以
```js 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数据
```js // axios举例 axios.get('/user', {     params: {       ID: 12345     }   })   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   }); ```


总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。   axios封装：https://www.cnblogs.com/fei-yu9999/p/15271563.html