阅读 105

vue-axios拦截器

  axios还提供了拦截器的功能,他的拦截器是用拦截 请求和响应的,说简单是:请求到服务器前拦截 和 响应到客户端前拦截。

  之前我们在request.js封装了一些代码,如下:

import axios from ‘axios‘

export function request(config){
  //配置axios实例通用配置
  const instance1 = axios.create({
    baseURL: ‘http://httpbin.org‘,
    timeout: 5000
  })

  return instance1(config)
}

  实际上这个封装还不完整,通常还会再这里加拦截器的,如下:

import axios from ‘axios‘

export function request(config){
  //1. 配置axios实例通用配置
  const instance1 = axios.create({
    baseURL: ‘http://httpbin.org‘,
    timeout: 5000
  })
   //2. 配置拦截器
  //配置请求拦截器
  instance1.interceptors.request.use(config => { //请求拦截成功,会进入这里;注意这里的config不是上面参数config,这里的config是最终的请求配置项,包括baseURL,url,method,timeout
    /**
     *  常用拦截后的处理:
     *    1. 拦截config中一些不符合服务器要求的配置,并修改这些配置
     *    2. 一般请求成功后,数据不会马上返回,可以在这里显示一个正在加载的图标等
     *    3. 当需要某个请求必须携带token时,可以在这里进行判断
     */
    console.log(‘我拦截成功了‘)
    
    return config //要返回出去,如果没有返回出去,则代表拦截掉这个请求
  },err => { //请求失败执行这里,这里不是拦截失败,是请求失败会进入这里

  })

  //配置响应拦截器
  instance1.interceptors.response.use(result => { //响应成功进入这里;result是服务器响应的结果
    
    return result.data //这里通常是需要返回的,如果不返回代表发送请求的地方拿不到数据,还有很多时候不直接返回result的,因为最需要的其实是result的data数据
  },err => {  //响应失败会进入这里

  })

  //3. 发送请求  
  return instance1(config)
}

 

原文:https://www.cnblogs.com/ibcdwx/p/14644942.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐