[https://www.jianshu.com/p/86122178002a](https://www.jianshu.com/p/86122178002a) 第一步：配置axios 首先，創建一個Service.js，這里面存放的時axios的配置以及攔截器等，最后導出一個axios對象。我平常elementUI用的比較多，這里你也可以使用自己的UI庫。 ~~~tsx import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默認路徑，這里也可以使用env來判斷環境 let loadingInstance = null //這里是loading //使用create方法創建axios實例 export const Service = axios.create({ timeout: 7000, // 請求超時時間 baseURL: ConfigBaseURL, method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 添加請求攔截器 Service.interceptors.request.use(config => { loadingInstance = Loading.service({ lock: true, text: 'loading...' }) return config }) // 添加響應攔截器 Service.interceptors.response.use(response => { loadingInstance.close() // console.log(response) return response.data }, error => { console.log('TCL: error', error) const msg = error.Message !== undefined ? error.Message : '' Message({ message: '網絡錯誤' + msg, type: 'error', duration: 3 * 1000 }) loadingInstance.close() return Promise.reject(error) }) ~~~ 具體的攔截器邏輯以具體業務為準，我這里沒什么邏輯，只是加了一個全局的loading而已 第二步：封裝請求 這里我再創建一個request.js,這里面放的是具體請求。 ~~~jsx export function getConfigsByProductId(productId) { return Service({ url: '/manager/getConfigsByProductId', params: { productId: productId } }) } export function getAllAndroidPlugins() { return Service({ url: '/manager/getAndroidPlugin ', method: 'get' }) } export function addNewAndroidPlugin(data) { return Service({ url: '/manager/addAndroidPlguin', data: JSON.stringify(data) }) } ~~~ 當然你也可以url再封裝一遍，放到另一個文件里，我覺得這樣并無什么意義，反而增加復雜度。這里主要注意的是起名問題，建議按功能起名，例如我這里請求方式+功能或者內容+參數,這樣子直接看getConfigsByProductId這個名字也是很清晰明了 第三步：使用 在vue組件中 ~~~jsx import {getAllAndroidPlugins,getConfigsByProductId,addNewAndroidPlugin} from '@/api/request.js' getAllAndroidPlugins() .then(res=>{ }) ~~~ 全局使用 在main.js中 ~~~jsx import {Service} from '@/api/Service.js' Vue.prototype.$axios=Service ~~~ 作者：糖醋里脊120625 鏈接：https://www.jianshu.com/p/86122178002a 來源：簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。