zoukankan      html  css  js  c++  java
  • 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)
    }
  • 相关阅读:
    【剑指offer】把字符串转换成整数
    【剑指offer】不用加减乘除做加法
    【剑指offer】求1+2+3+...+n
    【剑指offer】孩子们的游戏(圆圈中最后剩下的数)
    【剑指offer】扑克牌顺子
    【剑指offer】翻转单词顺序列
    【剑指offer】左旋转字符串
    【剑指offer】和为S的两个数字
    【剑指offer】和为S的连续正数序列
    2019.1.10 Mac安装Nginx服务器
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14644942.html
Copyright © 2011-2022 走看看