> 我经常用到的两种axios网络封装请求 ### **1.vue2+js （或者称之为简易版）** 创建文件如下  在request.js中 ~~~ import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: '/author', //请求地址 timeout: 5*1000 //请求超时时间 }) // 2.axios的拦截器 // 2.1.请求拦截的作用 instance.interceptors.request.use(config => { config.headers.Authorization = "Bearer "+sessionStorage.getItem("token"); return config // eslint-disable-next-line no-unused-vars }, err => { // console.log(err); }) // 2.2.响应拦截 instance.interceptors.response.use(res => { return res.data }, err => { console.log(err); }) // 3.发送真正的网络请求 return instance(config) } ~~~ 在home.js中 此文件夹名可随意命名 ~~~ import {request} from "./request"; //章节列表 export function chapterList(data) { return request({ method:"post", url: '/book/chapterList', data:data }) } //章节添加 export function chapterAdd(data) { return request({ method:"post", url: '/book/chapterContentAdd', data:data }) } //章节更新 export function chapterUpdate(data) { return request({ method:"put", url: '/book/chapterContentEdit', params:data }) } ~~~ 调用的时候 只需要 ~~~ import {chapterList, chapterAdd, chapterUpdate} from "../network/home"; addChapterData() { this.$refs.ruleForm.validate(valid=>{ if(!valid) return false; //************************************************************* //调用方法 传入参数 发送axios请求 chapterAdd(this.form).then(res => { if (res.code !== 0) { this.$message.error("章节添加失败"); return false; } this.$message.success("章节添加成功!"); this.dialogFormVisible = false; this.createdData() //清空添加数据 this.$refs.ruleForm.resetFields() }).catch(err => { console.log(err); }) //************************************************************* }) }, ~~~ vue.config.js 前端配置 nginx 跨域请求 ~~~ module.exports = { devServer: { proxy: { '/author': { target: 'http://****.wml***.cn/author', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写， '^/author': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。 } }, '/admin': { target: 'http://****.wml.cn/admin', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写， '^/admin': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。 } }, } }, configureWebpack:{ resolve:{ alias:{ 'network':"@network", 'assets':"@assets", 'components':"@components", 'views':"@views", } } } } ~~~ ### **第二种 vue3+ts+axios发送网络请求 我还没有完全理解 先暂定 （我尼玛复杂版本）**