当前位置:   article > 正文

axios 请求拦截器&响应拦截器_instance.interceptors.request.use

instance.interceptors.request.use

一、 拦截器介绍

一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。

  1. 请求拦截器
    在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
  2. 响应拦截器
    同理,响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效等。

二、 Axios实例

  1. 创建axios实例
    1. // 引入axios
    2. import axios from 'axios'
    3. // 创建实例
    4. let instance = axios.create({
    5. baseURL: 'xxxxxxxxxx',
    6. timeout: 15000 // 毫秒
    7. })

  2. baseURL设置:
    1. let baseURL;
    2. if(process.env.NODE_ENV === 'development') {
    3. baseURL = 'xxx本地环境xxx';
    4. } else if(process.env.NODE_ENV === 'production') {
    5. baseURL = 'xxx生产环境xxx';
    6. }
    7. // 实例
    8. let instance = axios.create({
    9. baseURL: baseURL,
    10. ...
    11. })
  3. 修改实例配置的三种方式
    1. // 第一种:局限性比较大
    2. axios.defaults.timeout = 1000;
    3. axios.defaults.baseURL = 'xxxxx';
    4. // 第二种:实例配置
    5. let instance = axios.create({
    6. baseURL: 'xxxxx',
    7. timeout: 1000, // 超时,401
    8. })
    9. // 创建完后修改
    10. instance.defaults.timeout = 3000
    11. // 第三种:发起请求时修改配置、
    12. instance.get('/xxx',{
    13. timeout: 5000
    14. })

    这三种修改配置方法的优先级如下:请求配置 > 实例配置 > 全局配置

三、 配置拦截器

  1. // 请求拦截器
  2. instance.interceptors.request.use(req=>{}, err=>{});
  3. // 响应拦截器
  4. instance.interceptors.reponse.use(req=>{}, err=>{});

从上可以看出,instance依然是第二步中创建的实例,然后对其进行拦截,请求用request,响应用reponse,二者都有两个配置项,一个是成功配置,一个是error配置。

  1. 请求拦截器
    1. // use(两个参数)
    2. axios.interceptors.request.use(req => {
    3. // 在发送请求前要做的事儿
    4. ...
    5. return req
    6. }, err => {
    7. // 在请求错误时要做的事儿
    8. ...
    9. // 该返回的数据则是axios.catch(err)中接收的数据
    10. return Promise.reject(err)
    11. })

  2. 响应拦截器
    1. // use(两个参数)
    2. axios.interceptors.reponse.use(res => {
    3. // 请求成功对响应数据做处理
    4. ...
    5. // 该返回的数据则是axios.then(res)中接收的数据
    6. return res
    7. }, err => {
    8. // 在请求错误时要做的事儿
    9. ...
    10. // 该返回的数据则是axios.catch(err)中接收的数据
    11. return Promise.reject(err)
    12. })

  3. 常见错误码处理(error)
    axios请求错误时,可在catch里进行错误处理。
    1. axios.get().then().catch(err => {
    2. // 错误处理
    3. })

    但实际开发过程中,一般在请求/响应拦截器中统一做错误处理,有特殊接口的话做单独的catch错误处理

四、 axios请求拦截器的案例 

 

axios请求发送之前,拦截请求,在请求中加入从cookie中获取到的csrftoken值。以解决后端接口csrf验证问题。

如下,可以在vue项目的src目录下新建一个axios_instance.js文件,用于创建一个axios实例和进行相关配置。

  1. import axios from 'axios'
  2. // 创建一个axios实例
  3. const axios_instance = axios.create()
  4. // 设置axios拦截器:请求拦截器
  5. axios_instance.interceptors.request.use(config => {
  6. //请求拦截一般会有哪些操作
  7. // 1.比如config中的一些信息不符合服务器的要求,这里可以做一些修改
  8. // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标(然后再响应拦截中取消显示)
  9. // 3.某些网络请求必须携带一些特殊的信息(如登录token),如果没有携带就可以拦截并作响应提示
  10. // 给请求头添加token
  11. /*
  12. * 其中 /.*csrftoken=([^;.]*).*$/ 是一个正则表达式,用于从cookie中获取csrftoken的值 ,
  13. * ([^;.]*) 是命名捕获,表示从匹配到的内容中 只获得 ()内的值。
  14. * string.match(regex) 得到的是一个数组, 第0项是匹配到的全部内容,第1项是通过命名捕获得到的内容,在这里就是csrftoken的值。
  15. * 这样就完成了使用axios发送请求的正确配置了,同时保证了网站免受csrf攻击的影响.
  16. */
  17. config.headers['X-Requested-With'] = 'XMLHttpRequest';
  18. let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值
  19. config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
  20. return config
  21. }, err => {
  22. // 请求未成功发出,如:没有网络...
  23. return Promise.reject(err)
  24. })
  25. /*
  26. // 设置axios拦截器: 响应拦截器
  27. axios_instance.interceptors.response.use(res => {
  28. // 成功响应的拦截
  29. return Promise.resolve(res.data)
  30. }, err =>{
  31. // 失败响应的拦截
  32. console.log(err)
  33. if(err.response){
  34. // 失败响应的status需要在response中获得
  35. console.log(err.response)
  36. switch(err.response.status){
  37. // 对得到的状态码的处理,具体的设置视自己的情况而定
  38. case 401:
  39. console.log('未登录')
  40. window.location.href='/'
  41. break
  42. case 404:
  43. window.location.href='/'
  44. break
  45. case 405:
  46. console.log('不支持的方法')
  47. break
  48. // case ...
  49. default:
  50. console.log('其他错误')
  51. break
  52. }
  53. }
  54. // 注意这里应该return promise.reject(),
  55. // 因为如果直接return err则在调用此实例时,响应失败了也会进入then(res=>{})而不是reject或catch方法
  56. return Promise.reject(err)
  57. })
  58. */
  59. export {
  60. axios_instance
  61. }

如此,
在需要拦截请求or响应的地方,就可以使用新建的axios实例来发起异步请求;
而不需要拦截请求/响应的地方,就可以直接使用axios来发起异步请求!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/57155
推荐阅读
相关标签
  

闽ICP备14008679号