axios 二次封装
原文链接:https://note.noxussj.top/?source=sifo
基本上每一个项目开发,都必须要二次封装 axios。主要是为了减少重复性工作,不可能每一次发起新请求时,都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数,每次调用的时候只需要传入变化的参数。
封装
src/plugins/axios.js
import axios from 'axios'
import qs from 'qs'
/**
* 请求拦截器
*/
axios.interceptors.request.use((config) => {
config.data = qs.stringify(config.data)
return config
})
/**
* 响应拦截器
*/
axios.interceptors.response.use((response) => {
if (response.data.code !== 200) {
alert('接口响应失败')
}
return response.data
})
/**
* 接口请求方法
*/
const request = (method, option) => {
return axios({
method: method,
url: 'https://study.noxussj.top' + option.url,
data: option.data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
export default {
get: (option) => request('get', option),
post: (option) => request('post', option),
put: (option) => request('put', option)
}
调用
这样每次发起请求时,只需要把 二次封装的 axios 引入进来使用即可。可以大幅减少代码数量。
import axios from './plugins/axios.js'
/**
* 发起请求
*/
const p1 = axios.post({
url: '/api/login',
data: { account: 'test', password: '123456' }
})
p1.then((res) => {
console.log(res.data)
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。