Vue封装axios

封装请求

• 请求拦截器
• 响应拦截器
• 设置响应等待时间、baseUrl、反向代理
• 断网处理
• 错误跳转

1. 首先需要安装 qs axios vant
2. 在src目录下新建request目录,request下新建http.js，api.js两个文件

http.js

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
 import axios from 'axios';
 import router from '../router';
 import store from '../store';
 import { Toast } from 'vant';
 
 /** 
  * 提示函数 
  * 禁止点击蒙层、显示一秒后关闭
  */
 const tip = msg => {    
     Toast({        
         message: msg,        
         duration: 1000,        
         forbidClick: true    
     });
 }
 
 /** 
  * 跳转登录页
  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  */
 const toLogin = () => {
     router.replace({
         path: '/login',        
         query: {
             redirect: router.currentRoute.fullPath
         }
     });
 }
 
 /** 
  * 请求失败后的错误统一处理 
  * @param {Number} status 请求失败的状态码
  */
 const errorHandle = (status, other) => {
     // 状态码判断
     switch (status) {
         // 401: 未登录状态，跳转登录页
         case 401:
             toLogin();
             break;
         // 403 token过期
         // 清除token并跳转登录页
         case 403:
             tip('登录过期，请重新登录');
             localStorage.removeItem('token');
             store.commit('loginSuccess', null);
             setTimeout(() => {
                 toLogin();
             }, 1000);
             break;
         // 404请求不存在
         case 404:
             tip('请求的资源不存在'); 
             break;
         default:
             console.log(other);   
         }}
 
 // 创建axios实例
 var instance = axios.create({    
    baseURL : '/api',
    timeout: 1000 * 12
});
 //根据环境设置baseUrl 这块我先注释了 有需要直接打开用即可 node可以根据环境配置baseUrl
//  if (process.env.NODE_ENV == 'development') {    
//     axios.defaults.baseURL = '/api';
// } else if (process.env.NODE_ENV == 'debug') {    
//     axios.defaults.baseURL = '';
// } else if (process.env.NODE_ENV == 'production') {    
//     axios.defaults.baseURL = 'http://api.123dailu.com/';
// }
 // 设置post请求头
 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 /** 
  * 请求拦截器 
  * 每次请求前，如果存在token则在请求头中携带token 
  */ 
 instance.interceptors.request.use(    
     config => {        
         // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
         // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
         // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
         // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
         const token = store.state.token;        
         token && (config.headers.Authorization = token);        
         return config;    
     },    
     error => Promise.error(error))
 
 // 响应拦截器
 instance.interceptors.response.use(    
     // 请求成功
     res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
     // 请求失败
     error => {
         const { response } = error;
         if (response) {
             // 请求已发出，但是不在2xx的范围 
             errorHandle(response.status, response.data.message);
             return Promise.reject(response);
         } else {
             // 处理断网的情况
             // eg:请求超时或断网时，更新state的network状态
             // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
             // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
             store.commit('changeNetwork', false);
         }
     });
 
 export default instance
           

值得一说的是baseUrl,这个地方用的是Vue自带的反向代理,也就是说我在.config.js中配置了代理路径

var proxy = require('http-proxy-middleware');
module.exports = {
    devServer: {
        proxy: {
          '/api': { // api表示当前项目请求的key
            ws: true,
            target: 'http://192.168.30.58:8080', // 代理服务器路径
            //举个例子ng的反向代理 http://本机前端ip:端口/api/aaa =>会自动转发到http://192.168.30.58:8080/aaa,所以我上面的baseUrl写的是/api，然后会在这里抹掉，所以不会导致找不到后端接口而404
            pathRewrite: {'^/api' : ''}, // 重写路径 
            changeOrigin: true
          }
        }
     }    
}
           

1. 在api.js统一配置请求路径

import axios from './http'//这里的axios是http.js export出去的axios的一个实例
const apiTest = p=>axios.post('/aaa',p)//本机后端定义好的一个接口 http:localhost:8080/aaa

export default {
   apiTest
}
           

1. 在main.js中我们在设置一下prototype

import apiFunction from './request/api'
Vue.prototype.$api =apiFunction
           

1. 请求示例