（二）深入axios【进阶知识】

将以在Vue3.0中的使用为例，讲解axios方面的内容。

1.创建axios实例

创建实例用 axios.create({...})

instance为一个axios实例。创建axios实例有时会方便很多，比如几个接口需要设置的超时时长不一致，这个时候用实例就方便很多，可以分别设置各自的超时时长。如果只有一个接口，那直接使用axios.get...就可以。

2.axios实例的配置参数

以下是最基本且最常用的配置参数：

3.哪些地方可以进行参数配置

axios全局配置

一般需要全局配置的就baseURL和timeout，当然，具体配置需要根据实际情况而定

axios实例配置

axios请求配置

三种配置的优先级

请求配置最高，实例配置次之，全局配置最低。即：请求配置>实例配置>全局配置

以上面三个代码为例，timeout超时时长就是5000ms，而不是3000ms或1000ms。

4.实际开发简单举例

比如现在有两种请求接口，分别是 http://localhost:8080 和 http://localhost:9090

实例1请求的是域名为http://localhost:8080 的接口，用到的参数有：baseURL，timeout，method，url

实例2请求的是域名为http://localhost:9090 的后端服务，用到的参数有：baseURL，timeout，method，url

注：timeout不是前端随便设置的，是后端根据实际请求资源的大小提供的参考预估而定的~

5.axios的拦截器

拦截器：在请求或响应之前拦截它们做一些处理。可以分为请求拦截器和响应拦截器。

一般都是给axios实例添加拦截器，而不直接给axios添加，因为axios是全局可用的，容易造成全局污染。

写法模板如下：

请求拦截器 axios.interceptors.request.use（...）

实际应用举例

某些接口需要登录后才能访问，如app上的评论功能。在发送请求前追加token

又或者移动端在发送请求前加一个等待弹窗，响应后隐藏弹窗

取消拦截器可用 axios.interceptors.request.eject（interceptors）（了解即可，一般不轻易取消）

响应拦截器 axios.interceptors.response.use（...）

5.错误处理

定义：请求错误时进行的处理。

请求成功最终都会进入 then() 方法里，请求错误最终都会进入 catch() 方法里。

如果不想频繁设置catch()错误函数，可以添加一个统一错误处理，即在添加请求拦截器和响应拦截器，并在第二个参数err中添加错误时的处理，如显示错误时的http状态码，以此提示可能的错误原因。如果某个接口需要单独特殊的错误处理，则可以在当前请求中的catch中添加。

6.取消请求

简单了解即可，基本用不到。

定义：取消正在进行的http请求。

实际应用：在某个商城查询东西时，3-5s后仍然未查询到，想取消该请求，查询下一项，此时可用到取消请求的操作。

 

更多axios内容，见作者其他文章~