2020.10.28 早9.40。
今天忙里偷闲记录下在vue里面封装axios以及请求拦截响应拦截器
首先理解整个思路:
1、将baseUrl提出来,这是访问服务端的地址。
2、使用es6类的写法封装axios拦截器。
3、封装之后在创建api文件夹在此文件夹里面引入封装后的axios,之后就可以创建各个接口。
BaseUrl.js
export const baseUrl = process.env.NODE_ENV === 'production'
? './' //生产环境下的url
: '' //开发环境下的url 如果vue.config.js里面配置了代理,那么这里不需要写直接为空字符串
axios.js
import { baseUrl } from './BaseUrl.js'
class HttpRequest {
constructor ( baseurl = baseUrl ) {
this.baseurl = baseurl
this.queue = {}
}
getInsideConfig() {
const config = {
baseurl : this.baseurl,
headers: {
'Content-Type': 'application/json;chartset=utf-8'
}
}
return config
}
interceptors(instance) {
instance.interceptors.request.use(config => { //请求拦截
config.headers['token'] = getToken()
return config
}, error => {
return Promise.reject(error)
})
instance.interceptors.response.use(res => { //响应拦截
return res
}, error => {
return Promise.reject(error)
})
}
request(options){
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance)
return instance(options)
}
}
export default HttpRequest
创建api文件夹 随后接口都在此文件夹下调用
index.js
import HttpRequest from './lib/axios.js'
const axios = new HttpRequest()
export default axios
api文件夹下创建一个login.js
import axios from './index.js'
export const getLogin = ( userName, password) => {
return axios.request({
url: '/admin/login',
data: {
userName,
password
}
})
}