axios二次封装：

先进性下载：

npm i axios -S

在main.js引入

import axios from 'axios'

Vue.prototype.axios = axios;

第一步：创建主文件创建一个vue.config.js  文件

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'url',    //想要访问接口域名
                changeOrigin: true,  //开启跨域，在本地创建一个虚拟服务，然后发送请求的数据，并同时接受请求的数据，这样服务端和服务端进行数据交互就不会有问题
                pathRewrite: {
                    '^/api': '',    //利用这个地面的值拼接上target里面的地址                }
                }
            }
        }
    }, 
   
}

第二步：在src文件中创建一个api文件

第三步：request.js文件中对axios进行封装；

import axios from 'axios';

const Timentout=3000;

export const Service=axios.create({
    timeout:Timentout,
    method:'POST',
    headers:{
        "content-Tpye": "application/x-www-form-urlencoded",
        "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec",
    }
});

// 请求拦截
Service.interceptors.request.use(config=>{
    return config;
});

// 响应拦截
Service.interceptors.response.use(response=>{
    return response.data;
},err=>{
    console.log(err+'请求失败');
})

第四步：index.js文件中进行封装

import { Service } from './request';

export function searchCar(config) {
    let params = new URLSearchParams();
    params.append("page", config.page);
    params.append("mod", config.mod);
    
    return Service({
        url: "/api/url",
        method:'post',
        data: params
    });
    
}

 第五步：在vue页面调用使用：

import { searchCar } from "@/api";    //先进性引入
 
//然后在调用
 methods: {
    async getCarList() {
      return await searchCar({ page: this.pages, mod: "奥迪" });
    },
},
//存储到数组进行页面渲染
async created() {
    this.ContentList = await this.getCarList();
}