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

港控/mmm° 2023-10-02 00:23 27阅读 0赞

#### 话不多说，直接上代码 ####

首先新建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 };