zoukankan      html  css  js  c++  java
  • Vue axios封装一

    我们搭建一个Vue前端系统时,必须对axios封装,

    第一步:请求过滤,添加token

    axios.interceptors.request.use(config => {
         LoadingBar.start();
        let method = config.method.toLocaleLowerCase();
    
        if (method === 'post') {
          config.params = processParam(config.params);
          let user = getUser();
          user && user.access_token && (config.params['access_token'] = user.access_token);
          return config;
        }
    
        if (method === 'get') {
          config.params = config.params || {};
          let user = getUser();
          user && user.access_token && (config.params['access_token'] = user.access_token);
          return config;
        }
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    

      

    export const requestInterceptors = config => {
      setHeader(config.headers)
    
      if (config.method.toLowerCase() === 'get') {
        config.params = processParams(config.params)
      } else {
        // 解决后端需要form-data形式传参问题
        config.data = qs.stringify(processParams(config.data))
      }
    
      return config
    }
    

      

     axios.interceptors.request.use(requestInterceptors)

    第二步:回调过滤

    axios.interceptors.response.use(response => {
        return response.data;
      },
      error => {
        LoadingBar.error();
        if (error.response) {
          switch (error.response.status) {
            case 401:
              // 返回 401 清除token信息并跳转到登录页面
              Storage.removeAll(true);
              router.replace({
                path: 'login',
              });
    
              break;
            case 500:
              // 返回 500
              Message.error(CONSTANT.HTTP_STATUS.SERVER_ERROR.MSG);
              break;
          }
        }
        return Promise.reject(error)
      }
    );
    //请求拦截器
    axios.interceptors.request.use(config => {
    // LoadingBar.start();
    let method = config.method.toLocaleLowerCase();

    if (method === 'post') {
    config.params = processParam(config.params);
    let user = getUser();
    user && user.access_token && (config.params['access_token'] = user.access_token);
    return config;
    }

    if (method === 'get') {
    config.params = config.params || {};
    let user = getUser();
    user && user.access_token && (config.params['access_token'] = user.access_token);
    return config;
    }
    return config;
    },
    error => {
    return Promise.reject(error);
    }
    );
  • 相关阅读:
    【C++】<bits/stdc++.h>
    【网易】被3整除
    【TCP/IP详解】UDP:用户数据报协议
    【网易】牛牛找工作
    【C++】<numeric>中iota函数:递增序列填充

    今天好像找到C语言延迟输出的原因了
    C语言第2
    c语言新知
    glade No package 'libxml-2.0' found
  • 原文地址:https://www.cnblogs.com/tylz/p/11858373.html
Copyright © 2011-2022 走看看