将以在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内容,见作者其他文章~