赞
踩
一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。
- // 引入axios
- import axios from 'axios'
-
- // 创建实例
- let instance = axios.create({
- baseURL: 'xxxxxxxxxx',
- timeout: 15000 // 毫秒
- })
- let baseURL;
- if(process.env.NODE_ENV === 'development') {
- baseURL = 'xxx本地环境xxx';
- } else if(process.env.NODE_ENV === 'production') {
- baseURL = 'xxx生产环境xxx';
- }
-
- // 实例
- let instance = axios.create({
- baseURL: baseURL,
- ...
- })
- // 第一种:局限性比较大
- axios.defaults.timeout = 1000;
- axios.defaults.baseURL = 'xxxxx';
-
- // 第二种:实例配置
- let instance = axios.create({
- baseURL: 'xxxxx',
- timeout: 1000, // 超时,401
- })
- // 创建完后修改
- instance.defaults.timeout = 3000
-
- // 第三种:发起请求时修改配置、
- instance.get('/xxx',{
- timeout: 5000
- })

这三种修改配置方法的优先级如下:请求配置 > 实例配置 > 全局配置
- // 请求拦截器
- instance.interceptors.request.use(req=>{}, err=>{});
- // 响应拦截器
- instance.interceptors.reponse.use(req=>{}, err=>{});
从上可以看出,instance依然是第二步中创建的实例,然后对其进行拦截,请求用request,响应用reponse,二者都有两个配置项,一个是成功配置,一个是error配置。
- // use(两个参数)
- axios.interceptors.request.use(req => {
- // 在发送请求前要做的事儿
- ...
- return req
- }, err => {
- // 在请求错误时要做的事儿
- ...
- // 该返回的数据则是axios.catch(err)中接收的数据
- return Promise.reject(err)
- })
- // use(两个参数)
- axios.interceptors.reponse.use(res => {
- // 请求成功对响应数据做处理
- ...
- // 该返回的数据则是axios.then(res)中接收的数据
- return res
- }, err => {
- // 在请求错误时要做的事儿
- ...
- // 该返回的数据则是axios.catch(err)中接收的数据
- return Promise.reject(err)
- })
- axios.get().then().catch(err => {
- // 错误处理
- })
但实际开发过程中,一般在请求/响应拦截器中统一做错误处理,有特殊接口的话做单独的catch错误处理
axios请求发送之前,拦截请求,在请求中加入从cookie中获取到的csrftoken值。以解决后端接口csrf验证问题。
如下,可以在vue项目的src目录下新建一个axios_instance.js文件,用于创建一个axios实例和进行相关配置。
- import axios from 'axios'
-
- // 创建一个axios实例
- const axios_instance = axios.create()
-
- // 设置axios拦截器:请求拦截器
- axios_instance.interceptors.request.use(config => {
- //请求拦截一般会有哪些操作
- // 1.比如config中的一些信息不符合服务器的要求,这里可以做一些修改
- // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标(然后再响应拦截中取消显示)
- // 3.某些网络请求必须携带一些特殊的信息(如登录token),如果没有携带就可以拦截并作响应提示
-
- // 给请求头添加token
- /*
- * 其中 /.*csrftoken=([^;.]*).*$/ 是一个正则表达式,用于从cookie中获取csrftoken的值 ,
- * ([^;.]*) 是命名捕获,表示从匹配到的内容中 只获得 ()内的值。
- * string.match(regex) 得到的是一个数组, 第0项是匹配到的全部内容,第1项是通过命名捕获得到的内容,在这里就是csrftoken的值。
- * 这样就完成了使用axios发送请求的正确配置了,同时保证了网站免受csrf攻击的影响.
- */
- config.headers['X-Requested-With'] = 'XMLHttpRequest';
- let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值
- config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
- return config
- }, err => {
- // 请求未成功发出,如:没有网络...
- return Promise.reject(err)
- })
-
- /*
- // 设置axios拦截器: 响应拦截器
- axios_instance.interceptors.response.use(res => {
- // 成功响应的拦截
- return Promise.resolve(res.data)
- }, err =>{
- // 失败响应的拦截
- console.log(err)
- if(err.response){
- // 失败响应的status需要在response中获得
- console.log(err.response)
- switch(err.response.status){
- // 对得到的状态码的处理,具体的设置视自己的情况而定
- case 401:
- console.log('未登录')
- window.location.href='/'
- break
- case 404:
- window.location.href='/'
- break
- case 405:
- console.log('不支持的方法')
- break
- // case ...
- default:
- console.log('其他错误')
- break
- }
- }
- // 注意这里应该return promise.reject(),
- // 因为如果直接return err则在调用此实例时,响应失败了也会进入then(res=>{})而不是reject或catch方法
- return Promise.reject(err)
- })
- */
-
-
- export {
- axios_instance
- }
-

如此,
在需要拦截请求or响应的地方,就可以使用新建的axios实例来发起异步请求;
而不需要拦截请求/响应的地方,就可以直接使用axios来发起异步请求!!!
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。