一、安装axios

npm install --save axios

二、新建api文件

        在src文件夹中新建api文件

        在api文件中新建requests.js文件

三、在requests.js文件中对requests进行二次封装

//对于axios进行二次封装
import axios from "axios";

//axios.create方法执行,其实返回一个axios和request一样的
let requests = axios.create({
    //基础路径,发请求URL携带api【发现:真实服务器接口都携带/api】
    baseURL: "/api",
    //超时的设置
    timeout: 5000
});

//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
    //请求拦截器:请求头【header】,请求头能否给服务器携带参数
    //请求拦截器：其实项目中还有一个重要的作用,给服务器携带请求们的公共的参数
    //不管那个模块发请求,请求拦截器，都可以触发。请求拦截器可以通过请求头每一次协大公共参数给服务器【用户未登录的临时身份】
    return config;
});


//响应拦截器：请求数据返回会执行
requests.interceptors.response.use((res) => {
    //res:实质就是项目中发请求、服务器返回的数据
    return res.data;
}, (err) => {
    //温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
    console.logconsole.log(err.message);
    //终止Promise链
    return new Promise();
});

//最后需要暴露:暴露的是添加新的功能的axios,即为requests
export default requests;

三、进行请求封装

        在api文件下新建index.js文件

//插入axios的二次封装函数
import requests from "./requests";
//get
export const reqCategory = () => {
   return requests({ method: 'get', url: '/product/getBaseCategoryList' });
}
//post
export const reqSearchList = (data)=>requests({url:'/list',method:'post',data})
//delete
export const reqDeleteCart = (skuId)=>requests({url:`/cart/deleteCart/${skuId}`,method:'delete'});

 四、在vue文件中调用

import { reqCategory } from '@/api';

reqCategory()

五、如果调用出现404，则是跨域问题，在vue.config.js文件里输入红色代码段，如没有vue.config.js文件，在根目录下新建，将一下代码复制进去即可。

module.exports = {

  productionSourceMap:false,

  // 关闭ESLINT校验工具

  lintOnSave: false,

  //配置代理跨域

  devServer: {

    proxy: {

      "/api": {

        target: "获取数据的服务器地址",

      },

    },

  },

};