封装axios请求

先在vue.config.js文件内配置代理跨域

  //配置代理跨域
  devServer: {
    proxy: {
      "/api": {
        target: "http://xxx.com",
      },
    },
  },

在src文件夹内添加service文件夹,内层添加index.js和requests.js两个文件

requests.js文件内部

//对于axios进行二次封装,需要先安装
import axios from "axios";
//引入进度条,需要先安装
import nprogress from 'nprogress';
//引入相关进度条的样式
import "nprogress/nprogress.css";

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

//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
    //进度条开始
    nprogress.start();
    
    //请求头携带的东西需要自己写，一般携带token
    //......
    //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
    //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
    //if(token){
    //config.params = {'token':token} //如果要求携带在参数中
    //config.headers.token= token; //如果要求携带在请求头中
    //}
    return config;
});


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

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

index.js文件内部

//统一管理项目前部的接口
import requests from "./requests";
//两种方法,传参或者拼接,data需要传参，其他参数拼接，根据接口文档来
export const reqSearchList = (data)=>requests({url:'/list',method:'post',data})
export const reqSubmitOrder = (tradeNo,data)=>requests({url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,method:'post',data});

使用

import { reqSearchList，reqSubmitOrder } from '@/service';
//async await直接用
async getUserInfo() {
     let result = await reqSearchList();
}