如何配置axios，通过axios请求后端数据流程，请求地址换源

首先创建一个文件夹services，里面创建两个文件api.ts和axiosInstance.ts

axiosInstance.ts中封装axios，对请求和响应拦截，进行token的发放和检测

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import qs from 'qs'

import { message } from 'antd';

let axiosInstance:AxiosInstance = axios.create({
  baseURL: "/api",
  headers: {
    // 前端允许接受的数据类型
    Accept: "application/json",
    // 前端后端发送的数据类型
    "Content-Type": "application/x-www-form-urlencoded"
  },
  transformRequest: [
    function(data) {
      //由于使用的form-data传数据所以要格式化
      data = qs.stringify(data);
      return data;
    }
  ]
});

// axios实例拦截响应
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 拦截响应，判断是否有token，如果有，就将token存入本地
    // if (response.headers.authorization) {
    //   localStorage.setItem('app_token', response.headers.authorization);
    // } else {
    //   if (response.data && response.data.token) {
    //     localStorage.setItem('app_token', response.data.token);
    //   } 
    // }

    if (response.status === 200) {
      return response;
    } else {
      console.log("响应失败")
      return response;
    }
  },
  // 请求失败
  (error: any) => {
    const {response} = error;
    if (response) {
      console.log("请求已发出，但是不在2xx的范围")
      return Promise.reject(response.data);
    } else {
      console.log(error)
      message.error('网络连接异常,请稍后再试!');
    }
  }
);

// axios实例拦截请求
axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    //检测本地是否token，如果有添加到请求头中
    // const token = localStorage.getItem('app_token');
    // if (token) {
    //   config.headers.Authorization = `Bearer ${token}`
    // }
    return config;
  },
  (error:any) => {
    alert("错了")
    return Promise.reject(error);
  }
) 
export default axiosInstance

api.ts中根据后端提供的接口，来封装各个请求的方法

import {
  IChangePwdReq,
  ILoginReq,
  IRegisterReq,
  ISetUserInfoReq,
} from "../types/request"
import axiosInstance from "./axiosInstance"

interface BaseRes {
  stat: string
}

interface DataRes {
  stat: string
  data: any
}

/**
 * @description: 用户登录
 */
export const login = (params: ILoginReq): Promise<DataRes> => {
  return axiosInstance.post("/auth/login", params).then((res) => {
    return res.data
  })
}
/**
 * @description: 退出登录
 */
export const logout = (): Promise<BaseRes> => {
  return axiosInstance.post("/auth/logout").then((res) => res.data)
}

每个请求要给出与之对应的数据类型，这就是types文件夹里面的数据类型的工作了

然后记得换源的问题，下载插件http-proxy-middleware，在里面配置换源信息

http-proxy-middleware插件中的中间件的第一个参数指的是，当发送请求的url中的前缀是/api的时候，访问的目标地址target就会替换成下面的，changeOrigin为true的时候，/api前端的请求就会将目标地址换位target，false就换成脚手架创建项目的地址