>[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> ~~~