实际开发过程中，我们项目可能会有大量接口，因此我们写代码的时候，如果不进行封装，则会产生大量冗余代码，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就完成了

Vue封装Axios请求的具体步骤

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

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

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

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;12345678910111213141516171819202122232425262728293031323334353637

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//发送请求要配置的参数 无参数的情况下也可以不写
  });}1234567891011

二.在页面中引入使用

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

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

Vue封装axios就完成喽

1.使用axios.create（）去封装，创建一个单独的实例
2.BaseUrl设置公共的服务器地址
3.timeOut设置访问超时时间，默认5000sm
4.设置前置请求拦截器 axios.interceptors.request.use
5.后置请求拦截器 axios.interceptors.response.use