广州网站提升排名,早那么做商城网站,网站初始开发的步骤,wordpress 菜单 调用axios 二次封装
基本上每一个项目开发#xff0c;都必须要二次封装 axios。主要是为了减少重复性工作#xff0c;不可能每一次发起新请求时#xff0c;都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数#xff0c;每次调用…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)
})原文链接菜园前端
