axios二次封装

1、在src中建一个request文件夹

2、先在request文件夹中建一个apiUrl.js 用来放请求地址   代码如下：

export const BASE_URL = '测试地址'
export const PRO_BASE_UR = '线上地址'

3、在request文件夹中建一个http.js 用来放axios 拦截器 最后将$axios导出   代码如下:

import axios from "axios";
// import { $Message } from "./utils";

import router from "../router"
import { BASE_URL, PRO_BASE_URL } from "./apiUrl.js";

let baseURL = '';

if (process.env.NODE_ENV == "development") { //开发环境
    baseURL = BASE_URL
} else { //生产环境
    baseURL = PRO_BASE_URL
}

//创建axios实例
const $axios = axios.create({
    baseURL,
    timeout: 5000,
});

// 添加请求拦截器
$axios.interceptors.request.use(function(config) {
    // console.log(process.env);
    // 登录路由    不需要token ； 其它，都需要携带token
    // token的设置  头信息的设置
    //注意：在哪个地方添加token？？ 将token保存到哪个字段中？？？？
    // if (config.url != "/back/login") {
    //     config.headers.access_token = store.getters.token;
    // }

    // console.log(config);
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
$axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    // return response;
    console.log('接收到后台的数据：', response);
    if (response.data.code != 0) { //服务器请求 ---业务未成功
        // $Message("error", "请求失败" + response.data.msg)
    }
    // console.log(response);
    //token过期；未携带token；篡改token  --->登录页面
    // if (response.data.code == 401) {
    //     router.push('/login');
    // }
    return response.data;
}, function(error) {
    if (error.response.status == 401) {
        router.push('/login');
    }
    // 对响应错误做点什么
    // return Promise.reject(error);
    return error.response.data
});


export default $axios;

4、建立请求层 我这边就不做那么多了，为了方便我就直接在request中建了一个index.js 用来放请求的方法  代码如下：

import $axios from './http'


export const getList = async () => {
    let res = await $axios.get('/perttier');//接口名称
    if (res.code == 200) {
        return res.data
    }
}

5、在想要用这个方法的页面导入这个文件将方法导入  代码如下：

import { getList } from "@/request/index";

使用方法

methods: {
    async getListData() {
      let data = await getList();
      console.log(data);
    },
}

这样请求多了，也方便维护。 别忘了点个赞再走！！！！！！！！！！！！