axios — 封装axios
最后更新于：2022-04-02 08:10:06
>[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] ##### 在任意试视图组件去调用
~~~
~~~
';