Vue - 封装配置 axios，api 统一管理接口

一. 配置axios

1. static 文件夹下创建一个 api 文件夹，用于统一管理接口

2. api 文件夹下创建 http.js 文件

   import axios from 'axios'
   import router from '../../src/router'
   import ElementUI from 'element-ui' // 这里使用的是 elementUI
   
   // 配置请求默认接口，环境切换
   if (process.env.NODE_ENV === 'development') {
       // 开发环境接口
       axios.defaults.baseURL = 'http://192.168.2.4:8082'
   } else if (process.env.NODE_ENV === 'production') {
       // 生产环境接口
       axios.defaults.baseURL = 'http://www.baidu.com'
   }
   // 设置请求超时时间
   axios.defaults.timeout = 15000
   // 是否允许跨域携带cookie信息
   axios.defaults.withCredentials = false;
   // 配置请求头
   axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
   
   // http request 拦截器 添加一个请求拦截器
   axios.interceptors.request.use((config) => {
       // 每次发送请求之前判断 localStorage 中是否存在token        
       // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
       // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
       let token = window.localStorage.getItem('token');
       // 添加token
       token && (config.headers.token = token)
       return config;
   }, (error) => {
       // 请求出错
       return Promise.reject(error);
   });
   // http response 拦截器 添加一个响应拦截器
   axios.interceptors.response.use((response) => {
       if (response.status === 200) {
           return Promise.resolve(response);
       } else {
           return Promise.reject(response);
       }
   }, (error) => {
       if (error.response.status) {
           switch (error.response.status) {
               // 401: 未登录
               // 未登录则跳转登录页面，并携带当前页面的路径
               // 在登录成功后返回当前页面，这一步需要在登录页操作。                
               case 401:
                   router.replace({
                       path: '/login',
                       query: {
                           redirect: router.currentRoute.fullPath
                       }
                   });
                   break;
   
                   // 403 token过期
                   // 登录过期对用户进行提示
                   // 清除本地token和清空vuex中token对象
                   // 跳转登录页面                
               case 403:
                   ElementUI.Message({
                       message: "token已过期，请重新登录验证！",
                       type: 'warning'
                   });
                   // 清除token
                   window.sessionStorage.clear();
                   // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                   router.replace({
                       path: '/login',
                       query: {
                           redirect: router.currentRoute.fullPath
                       }
                   })
                   break;
   
                   // 404请求不存在
               case 404:
                   ElementUI.Message({
                       message: "网络请求不存在！",
                       type: 'warning'
                   });
                   break;
                   // 其他错误，直接抛出错误提示
               default:
                   ElementUI.Message({
                       message: error.response.data.message,
                       type: 'warning'
                   });
           }
           return Promise.reject(error.response);
       } else {
           return Promise.reject(error)
       }
   })
   export default axios;
   

3. api 文件夹下创建一个 request.js 文件

   // 引入 http
   import axios from './http.js'
   // 登录接口
   const login = async(params) => {
       const res = await axios.post("/user/userAdd", params)
       return res.data
   }
   // 用户信息接口
   const getUser = async(params) => {
       const res = await axios.post("/user/getUser", params)
       return res.data
   }
   export default { login, getUser }
   

4. main.js 中引入 request.js

   import http from '../static/api/request.js'
   Vue.prototype.$http = http
   

二. 组件中使用

let params = {
  username: "admin",
  password: "123456",
};
// 传入参数，调用 login 接口
this.$http.login(params).then((res) => {
  console.log(1111, res);
});

三. 总结 axios 拦截器（请求和响应）

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});