Vue如何封装axios请求

Vue封装Axios请求的具体步骤

实际开发过程中，我们项目可能会有大量接口，因此我们写代码的时候，如果不进行封装，则会产生大量冗余代码，API的封装，封装之后便于后期统一维护管理
一.在src文件夹下新建config文件夹并在此文件夹中新建api，env，http，三个文件
如图所示：

env.js这个文件封装我们的公共地址

  export default {
       // 开发环境
       dev: {
         baseUrl: "开发环境公共地址"
       },
       //   测试环境test
       test: {
         baseUrl: "测试环境公共地址"
       },
       //线上接口
       prod: {
         baseUrl: "线上环境公共地址"
       }
     };

http.js创建axios封装请求拦截和响应拦截

import axios from 'axios';
// import { config } from 'vue/types/umd';
import env from "./env.js"

const service = axios.create({
    baseURL: env.prod.baseURL,
    headers: { 'Content-Type': 'application/x-www-from-urlencoded' },
    settimeout: 2000,
})
// 添加请求拦截
service.interceptors.request.use(
    config => {
        // 在发送请求前都做些什么
        // 配置请求时参数
        // config.headers['deviceType'] = 'H5';
        console.log('请求的数据', config);
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject("出错", error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    response => {
        // 对相应数据做些什么
        console.log("返回的数据", response);
        return response;
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);
export default service;

api.js封装我们的接口函数

//引入http.js文件
import http from "./http.js";

// 示例
export function getexp(data) {
  return http({
    url: "http://jsonplaceholder.typicode.com/posts",//这个地址是去掉公共地址和私有域名之后剩下的地址
    method: "GET",//请求方式 支持多种方式  get post put delete 等等
    data//发送请求要配置的参数 无参数的情况下也可以不写
  });
}

二.在页面中引入使用

import {getexp} from "../config/api";

 mounted() {
        getexp()
            //直接使用 .then 是请求成功的回调 .catch是请求失败的回调
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log("错误提示", err);
            });
    },

Vue封装axios就完成喽