>[success] # 封裝全局axios ~~~ 1.使用es6 類的方式創建一個全局封裝 2.下面接口偽造參數格式 { code:200, data:{ name:'Lison' } ~~~ >[danger] ##### 在config 文件下index.js 對baseurl的配置方法 ~~~ 1.根據開發環境或者生產環境，對每個api的路由前綴配置 ~~~ ~~~ // 配置對象 導出 es6 語法 export default { } export const baseURL = process.env.NODE_ENV === 'production' ? 'http://production.com' : ''; ~~~ >[danger] ##### 在lib文件下的axios.js封裝 ~~~ 1.首先引入axios 文件 2.在config文件夾下配置'axios' 所需要的基本baseUrl配置 3.分析下面封裝的代碼，整個分裝分成四大塊，'constructor','interceptors', 'getInsideConfig','request' 3.1.'constructor' -- 構造器，對象初始化參數 3.2.'interceptors' -- 攔截器，分別對異步過程中的請求，和響應做攔截 3.3.'getInsideConfig' -- 'axios' 一些基礎配置 3.4.'request' -- 整個對象最后的執行方法，也是異步時候調用的入口方法 4.幾個參數講解：'Object.assign' es6方法會將兩個對象合并在一起，代碼對 應位置講解，'getInsideConfig',是我們做的默認配置，'options'是使用的時候 我們根據不同接口傳參的設置，最后將兩個合并就是整體配置，也是'axios' 做的配置 ~~~ ~~~ import axios from 'axios' import { baseURL } from '@/config' import { getToken } from '@/lib/util' class HttpRequest { constructor (baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const config = { baseURL: this.baseUrl, headers: { // } } return config } distroy (url) { delete this.queue[url] if (!Object.keys(this.queue).length) { // Spin.hide() } } interceptors (instance, url) { instance.interceptors.request.use(config => { // 添加全局的loading... if (!Object.keys(this.queue).length) { // Spin.show() } this.queue[url] = true config.headers['Authorization'] = getToken() return config }, error => { return Promise.reject(error) }) instance.interceptors.response.use(res => { this.distroy(url) const { data } = res return data }, error => { this.distroy(url) return Promise.reject(error.response.data) }) } request (options) { const instance = axios.create() options = Object.assign(this.getInsideConfig(), options) this.interceptors(instance, options.url) return instance(options) } } export default HttpRequest ~~~ >[danger] ##### 在api 文件夾創建index.js 引入分裝的'axios' 對象 ~~~ import HttpRequest from '../lib/axios' const axios = new HttpRequest() export default axios ~~~ >[danger] ##### 在api文件夾下創建一個user.js 使用 ~~~ import axios from './index' export const getUserInfo = ({ userId }) => { console.log(1) return axios.request({ url: '/person', method: 'post', data: { userId } }) } ~~~ >[danger] ##### 在任意試視圖組件去調用 ~~~ <template> <div class="home"> <button @click="getInfo">獲取信息</button> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import { getUserInfo } from '@/api/user' export default { name: 'home', components: { HelloWorld }, methods:{ getInfo(){ getUserInfo({ userId: 21 }).then(res => { console.log('res: ', res) }) }, } } </script> ~~~