什么是 Axios？
- Axios 本身是一个函数，原型上没有属性，所以并不是一个类
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
- 基于 promise 封装的 AJAX 库
- 核心是：XMLHttpRequest
- 把 AJAX 的核心四步进行封装，并且通过 promise 管理异步编程，来实现整个请求的封装
aixos 中的属性及方法
- axios.Axios：内部创建了一个 Axios 类
- axios() 的返回值：是一个 Promise
- axios.Cancel：取消请求
- axios.all：基于 promise.all 实现 AJAX 的并行
- 执行 axios.all 返回一个 promise 实例，参数是一个数组，数组中包含了很多个 AJAX 请求，当所有的 AJAX 请求都成功，整体才会返回一个成功的 promise 实例
- axios.create：创建一个新的实例，来做单独的全局配置
- axios.defaults：全局默认配置
- 发送对应方式的请求：
- axios.get
- axios.delete
- axios.head
- axios.options
- axios.post
- axios.patch
- axios.put
- 发送请求：request
- axios.interceptors：拦截器
- request：请求拦截器
- response：响应拦截器
- axios.spread：解析出基于 all 返回的结果
取消请求「不常用」：CancelToken
- 先获取 CancelToken，CancelToken 是一个函数：const CancelToken = axios.CancelToken;
- 使用 CancelToken 中的 source 方法，得到一个值：const source = CancelToken.source();
- 然后在发送请求的时候，通过 CancelToken 这个属性，把 source.token 传过去：CancelToken：cancelToken: source.token
- 以后通过 source.cancel() 这个方法来取消这个请求
基础配置
返回值
-
基于 axios 发送的请求，最后返回的都是 promise 实例
-
成功 promise 返回值：
- data：请求主体
- headers：请求头信息
- request：XMLHttpRequest 信息
- status：状态码
- statusText：状态信息
-
失败 promise 的返回值
- data：请求主体
- headers：请求头信息
- request：XMLHttpRequest 信息
- status：状态码
- statusText：状态信息
发送请求
- baseURL：基本地址
- url：请求地址
- 最终请求的地址：baseURL+ url
请求方式
- method：get 「默认」
- axios.head：发送 head 请求
- axios.options：发送 options 请求
- axios.patch：发送 patch 请求
- axios.post：发送 post 请求
- axios.put：发送 put 请求
- axios.request：发送请求
传参方式
- params：问号传参「get」：基于 URL 末尾拼接参数的方式，把 params 对象一项项传递给服务器
- paramsSerializer「内置方法」：params 对象最后可以拼接到 URL 的末尾，内部就是基于这个方法处理的
- 请求主体「post」：data 只针对 post 系列请求，设置请求主体传递的参数信息『Request Payload』，默认会把对象变为：application/json 字符串传递给服务器
请求主体信息：transformRequest
在 post 请求下，把请求主体信息发送给服务器之前，对请求主体信息进行处理
transformRequest：function(data){
return Qs.stringify(data)
}
- data 是作为请求主体被发送的数据：默认会转换为 JSON 格式；设置自己需要的格式
- Qs.stringify(data)：把参数转换为：application/x-www-form-urlencoded
- Form-Data：file=xxx&size=1024
- 在 POST 请求下，把请求主体信息发送给服务器之前，对请求主体信息进行处理
- 只能是纯粹的对象才会对请求主体信息进行 Qs.stringify(data) 处理：x-www-form-urlencoded / application/json
- data 可以直接传递 formData 格式
设置请求头信息
- 设置公共请求头「通用」
- 设置指定请求的请求头
设置超时时间
timeout：0
跨域请求是否需要使用凭证
withCredentials：false「默认：false」
自定义处理请求
adapter：function(config){...}
监听上传进度
onUploadProgress：function(){...}
监听下载进度
onDownloadProgress：function(){...}
内部规定，HTTP 状态码为多少「status」，就是请求成功，返回成功 Promise，否则返回失败的
validateStatus：function(status){
return status >= 200 && status < 300
}
validateStatus：status=> {
return status >= 200 && status < 300
}
请求失败的原因
发送失败的情况
- HTTP 失败
- 请求没有发送成功
- 服务器没有返回任何东西，例如：断网，也就是请求没发送到服务器
- 没有任何的反应
- 没有完成一个 HTTP 事物
- 请求没有发送成功
- axios 层失败
- 服务器一定有返回
- 服务器返回的状态码与 validateStatus 条件不一致
- 请求时间超时
- 请求取消
- 业务层失败
- 一般都是服务器根据业务需求，基于类似于 code 等标志，来区分不同的业务形态和结果
// 请求失败，给与提示
if(reason.response) {
switch (reason.response.status) {
case 400:
break;
case 401:
break;
case 403:
break;
case 404:
break;
}
} else {
if(reason && reason.code === " ECONNABORTED ") {
// 请求超时 或者是 请求中断
}
if( !navigator.onLine ) {
// 网络出现故障
}
}
- 返回的配置项
- reponse
- 如果是网络层失败，是没有 response 的
- 如果只是 axios 层失败，是存在 response 的
- request：原生的XHR对象
- config：设定的配置项
- isAxiosError：是否为 axios 层面的失败
- toJSON
- message：错误信息
- reponse
