Vue中axios的二次封装

一、首先在src目录下新建一个apis文件夹（文件夹名字按个人喜好）并在其目录下创建一个index.js文件用于axios第一次封装。

在src目录下index.js中代码如下图，它里面有请求拦截器和响应拦截器，对请求过程和响应响应过程做出基本的提交和反馈，方便我们直观的观察到请求过程中所遇到的问题：

// // !!! 第一次配置axios 
// import axios from "axios";
import axios from "axios";
import router from "../router/index";

export default function (config) {
  // 创建一个axios实例
  const instance = axios.create({
//请求的根路径写在此处
    baseURL: '/api',
  });
// 路由守卫
  // instance.beforeEach((to,from,next)=>{
  //   if(to.path==='/login') return next();
  //   const token=window.sessionStorage.getItem('token');
  //   if(!token) return next('/login')
  //   next ()
  // })

  // 添加请求拦截器
  instance.interceptors.request.use(config=>{
    config.headers.Authorization = sessionStorage.getItem('token')
    return config},error=>{return Promise(()=>{})})
  // 添加响应拦截器
  instance.interceptors.response.use(response => {
    // 对响应数据做一些事情
    return response.data; 
  }, error => {
    // 请求错误时做些事
    let status = "";
    if (error.request) {
      status = error.request;
    } else if (error.response) {
      status = error.response;
    }
    if (status) {
      switch (status.status) {
        case 400:
          error.message = "请求错误(400)";
          break;
        case 401:
          error.message = "未授权，请重新登录(401)";
          router.push("/401");
          break;
        case 403:
          error.message = "拒绝访问(403)";
          break;
        case 404:
          error.message = "请求出错(404)";
          router.push("/404");
          break;
        case 408:
          error.message = "请求超时(408)";
          break;
        case 500:
          error.message = "服务器错误(500)";
          router.push("/a500");
          break;
        case 501:
          error.message = "服务未实现(501)";
          break;
        case 502:
          error.message = "网络错误(502)";
          break;
        case 503:
          error.message = "服务不可用(503)";
          break;
        case 504:
          error.message = "网络超时(504)";
          break;
        case 505:
          error.message = "HTTP版本不受支持(505)";
          break;
        default:
          error.message = `连接出错(${error.response.status})!`;
      }
    } else {
      error.message = "连接服务器失败!,这里";
    }
    return Promise.reject(error);
  }
  );
  return instance(config)
}

 二、第2步，在apis文件夹下创建http.js文件，用于axios的二次封装，通过export将方法暴露出去，方便在所需页面调用。

// axios二次封装
import http from './index.js'
//下面就是请求数据时的写法！

//比如获取用户列表信息如下：

// 获取所有用户信息
export const get_users = (params) => {
    return http({
        //请求方法
        method: "GET",
        //请求路径
        url: "users",

        //请求参数 （注意这里写的是params是因为是get请求，如果是其他请求例如post、put请求要写为data）
        params: params
    })
}

三、第3步，在页面中引用Http.js文件，调用自己所配置好的请求方法，配合asnyc和awit异步请求方法，最终我们就可以直接的获取到请求的数据信息！

import { get_users} from '../apis/http.js'  //首先，引入http.js中暴露的获取用户的方法
export default {
    props: {

    },
    data() {
        return {
            
        };
    },

    created() {
//第三步 因为是自定义的getUserList方法 所以需要在钩子函数中调用才行！
        this.getUserList()
    },
    methods: {
//第二步  在自定义方法中调用get_users方法，通过async和awit搭配直接获取到数据
        async getUserList () {
             //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
            let {data:res} = await get_users(params)
            //console.log(res)这样就获取到了请求的所有数据！
            //后续就可以通过赋值的方式，在页面上渲染数据。
        }
    },
    components: {

    },
};