我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

首先作为工具类，需要创建一个新的文件夹utils

如果有装插件图标会变

 把拦截器和基地址等设置使用模块化封装到一个文件中

在项目开发中，一般不直接使用axios来发送请求，而是使用 axios.create() 创建一个 axios的副本  

新建js文件 request.js 上图有

下载axios 工具  npm i axios

导入工具 

 import axios from 'axios'

设置基地址  设置拦截器   

const request = axios.create({ 
  baseURL: '基地址1',
  timeout: 5000   
})                           


// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

       也可以设置多个基地址   拦截器也要在设置一个request1的

const request1 = axios.create({ 
  baseURL: '基地址2',
  timeout: 5000   
})          

我就以一个基地址为例

最后设置默认导出       export default request    

如果是多个的话  就按需 导出

axios二次封装完之后，可以再设置一个api文件夹，管理所有的axios请求

 以user为例

我会把登录和注册都封装在里面 

 首先导入封装的request.js文件  （图中我省略了.js）

按需导出   

当在登录页面和注册需要请求时 ，直接按需倒入userLogin   或  userRegister

以登录为例

直接在点击登录按钮时执行  

userLogin（{username,pasword }）

在点击执行函数  使用  async   await得到结果

async doClick（）{

 async  userLogin（{username,pasword }）

}

或者userLogin（{username,pasword }）.then（res=>{  res就是结果}）