vue项目中，对Axios进行二次封装，设置请求拦截和响应拦截，方便数据请求，详细如下

话不多说，直接上代码

首先新建http.js文件，代码如下：

// 首先在vue项目中执行npm i axios -S安装依赖，可以在package.json中进行查看是否安装成功
// 然后新建http.js文件（此文件），并在此引入；
import Axios from "axios";

// 声明instance实例，并在最后导出；
const instance = Axios.create({
  // 设置基本路径
  baseURL: "http://localhost:8080/",
  // 设置请求过期时间
  timeout: 5000,
});

// 挂载在请求拦截
instance.interceptors.request.use(
  (config) => {

    /**
    * 在此可以设置loading和token,还有提示信息等操作
    * 并返回成功信息
    */

    return config;

  },

  (err) => {

    /** 返回失败信息 */

    return Promise.reject(err);

  }

);


// 挂载在响应拦截
instance.interceptors.response.use(
  (res) => {

    /**
     * 在此可以对响应数据做处理和关闭loading等操作
     * 并返回响应信息
     */

    return res;

  },

  (err) => {

    /** 返回失败响应 */

    return Promise.reject(err);

  }

);


// 最后导出实例；

export default instance;

然后再次新建request.js文件，代码如下：

// 再次新建request.js文件，引入http页面导出内容
import http from "./http.js";

// 然后使用async await进行数据请求
// eg:
async function getBanner() {
    let { data } = await http.get("......");
    return data;
}
// 注意get和post的使用
async function getList(id) {
    let { data } = await http.get("......" + id);
    return data;
}

// 最后导出请求，并在需要的vue页面引入使用
export { getBanner, getList };