[TOC] >[success] # 封裝axios 1. 首先在 **src文件夾** 下的 **lib文件夾** 中創建 **axios.js** **src/lib/axios.js** ~~~ import axios from 'axios' import { baseURL } from '@/config' import { getToken } from '@/lib/util' class HttpRequest { constructor(baseUrl = baseURL){ // baseUrl = baseURL 是ES6的默認值寫法等同于 baseUrl = baseUrl || baseURL this.baseUrl = baseUrl // this指向創建的實例，當你使用new HttpRequest創建實例時候，它會把this中定義的變量返回給你 this.queue = {} // 創建隊列，每次請求都會向里面添加一個key:value，請求成功后就會去掉這個key:value，直到this.queue中沒有屬性值時，loading關閉 } /** * 默認options配置 */ getInsideConfig(){ const config = { baseURL: this.baseUrl, headers: { // } } return config } distroy (url) { delete this.queue[url] if (!Object.keys(this.queue).length) { // Spin.hide() } } /** * 攔截器 * @param {Object} instance - 通過axios創建的實例 * @param {String} url - 接口地址 */ interceptors(instance, url){ /** * 請求攔截器 * @param {Function} config - 請求前的控制 * @param {Function} error - 出現錯誤的時候會提供一個錯誤信息 */ instance.interceptors.request.use(config => { // 添加全局的Lodaing... if(!Object.keys(this.queue).length){ // Spin.show() } this.queue[url] = true config.headers['Authorization'] = getToken() return config }, error => { return Promise.reject(error) }) /** * 響應攔截器 * @param {Function} res - 服務端返回的東西 * @param {Function} error - 出現錯誤的時候會提供一個錯誤信息 */ instance.interceptors.response.use(res => { this.distroy(url) // 關閉全局的Lodaing... const { data } = res return data }, error => { this.distroy(url) // 關閉全局的Lodaing... return Promise.reject(error.response.data) }) } request(options){ const instance = axios.create() options = Object.assign(this.getInsideConfig(), options) // Object.assign會將2個對象合并成1個對象，相同屬性值會被后者覆蓋 this.interceptors(instance, options.url) // 攔截器 return instance(options) } } export default HttpRequest ~~~ **constructor方法** 是 **每一個類必須有的方法** ，如果我們不定義這個 **constructor方法** ， **class類** 會默認添加一個 **空的constructor方法（例如：constructor(){}）** ，在 **constructor方法** 中可以 **接收傳入的參數** ， 在我們 **創建實例 new HttpRequest('參數')** 時候可以 **在括號內傳入參數** ， 然后我們可以在 **constructor方法** 中 **對參數做一些操作** 。 2. 上面把 **baseUrl** 抽離到了 **config文件夾** 里的 **index.js 全局變量** 中 **src/config/index.js** ~~~ // 如果當前是生產環境用生產環境地址，如果是開發環境并且在vue.config.js中配置了代理，就用空字符串【''】，如果未配置代理就用開發環境地址 export const baseURL= process.env.NODE_ENV === 'production' ? 'http://production.com' : 'http://develop.com' ~~~ >[success] ## 使用方法 1. 在 **api文件夾** 中創建 **index.js** **src/api/index.js** ~~~ import HttpRequest from '@/lib/axios' const axios = new HttpRequest() export default axios ~~~ 在使用時候：我們創建一個儲存用戶接口的 **uesr.js** 文件 **src/api/user.js** ~~~ import axios from './index' // 獲取用戶信息接口 export const getUserInfo = ({ userId }) => { return axios.request({ url: '/index/getUserInfo', method: 'post', data: { userId } }) } ~~~ 然后在 **Home.vue** 頁面組件中這樣 **調用接口** **Home.vue** ~~~ <template> <div> <button @click="getInfo">請求數據</button> </div> </template> <script> import { getUserInfo } from '@/api/user' export default { methods: { getInfo(){ getUserInfo({ userId: 21 }).then(res => { console.log(res) }).catch(err => { console.log(err) }) } } } </script> ~~~