axios基础

axios：ajax请求库

 

1：特点：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

 

2：常用语法

 

3：常见配置

• 请求地址：url: '/user
• 请求类型：method: 'get'
• 请求根路径：baseURL: 'http://www.mt.com/api'
• 请求前数据处理：transformRequest:[function(data){}]
• 请求后数据处理：transformResponse:[function(data){}]
• 自定义请求头：headers:{'x-Requested-With':'XMLHttpRequest'}
• URL查询对象：params:{id:12}
• 查询对象序列化函数：paramsSerializer:function(params){}
• request body：data:{key:'aa'}
• 超时：timeout:1000
• 跨域是否带Token：withCredentials:false
• 自定义请求处理：adapter:function(resolve,reject,config){}
• 身份验证：auth:{uname:'', pwd:''}
• 相应数据格式：responseType:'json'   (json/blob/document/arraybuffer/text/stream)

 

4：拦截器：

　　3.1. 说明：调用axios()并不是立即发送ajax请求,而是需要经历一个较长的流程

　　3.2．流程:请求拦截器2=>请求拦截器1=>发ajax请求=>响应拦截器1=>响应拦截器2=>请求的回调

　　3.3：原理为promise，请求拦截是config，后进先执行（也就是后写的拦截先执行），响应拦截是response，先进先执行（也就是先写的拦截先执行）。这个和内部使用的函数有关，unshift和push。可以配置config和response

 

5：一些源码

　　axios和Axios的关系：axios是Axios的实例

　　axios是Axios.prototype.request函数bind()返回的函数

　　axios：先造了一个函数，然后在函数上继承Axios方法和属性

　　由于axios也是promise，所以也可以使用 all 来并发请求

 

6：整体运行流程

　　这里要着重理解一下cancel。

　　面试的时候面试官说到了cancel这个：长请求的响应比短请求的回来得慢，怎么处理？怎么拿到我想要的？当时虽然知道又cancel，但是不理解cancel是怎么取消的，我以为是在发送前拦截的，导致我以为，那他发送出去了，你无论如何都会拿到结果啊。现在复盘明白了，cancel是在响应拦截的时候做的，后置的promise直接reject，所以响应是可以拿到，但是这个prominse不会then下去了。