axios 二次封装

基本上每一个项目开发，都必须要二次封装 axios。主要是为了减少重复性工作，不可能每一次发起新请求时，都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数，每次调用的时候只需要传入变化的参数。

:::warning 注意
基于上个案例在继续做优化，如需要请查看 axios 响应拦截器。
:::

封装

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)
})

原文链接：菜园前端