> 我經常用到的兩種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發送網絡請求 我還沒有完全理解 先暫定 （我尼瑪復雜版本）**