Axios怎么封装呢?
大部分情况下都是以模块化开发的形式进行编码,产生了很多个js文件,如果我每个js文件了都需要用到axios请求数据,这样axios和我写的代码耦合度太高
假设如果某一天,我抛弃了axios,转用了request,那么就会出现一个非常严重的问题,我需要打开所有用到axios的js文件,进行修改其中的axios代码
如果有几十,上百个,我这不改的岂不是很费解?而且都是重复性高,没有任何价值的浪费时间,axios与项目的耦合度过高,我们要封装axios。
安装axios
npm install axios --save
引入axios(二选一)
const axios = require("axios"); // commonjs import axios from "axios"; // es6
封装axios完整代码request.js
// 引入axios const axios = require("axios"); // 暴露request()方法 module.exports = { async request(data) { //创建axios实例 const instance = axios.create() // 拦截器(处理axios返回的直接是请求数据,而不是要经过response.data获取数据) // 拦截器:当axios响应数据返回时,需要对数据进行加工的方法 instance.interceptors.response.use(res => { return res.data }) // 返回实例,返回的是一个promise return instance(data) } }
在业务代码中使用封装后的axios
// 引入封装好的axios const request = require("./request"); // 默认axios是get请求 const url = 'http://127.0.0.1:8080/user?username=admin&password=admin' request(url).then(data=>{ console.log(data) // 即可直接获取数据了 }) // get const url = 'http://127.0.0.1:8080/user?username=admin&password=admin' request({ method: 'post', url: url, data:{ username:'admin', password:'admin' } }) .then(data=>{ console.log(data) // 即可直接获取数据了 }) // post const url = 'http://127.0.0.1:8080/user' request({ method: 'post', url: url, data:{ username:'admin', password:'admin' } }) .then(data=>{ console.log(data) // 即可直接获取数据了 })
如果有哪一天我抛弃了aoxis转用request了,我就只需要修改request.js文件即可,就不用每个js文件都需要修改了。
文章版权声明:除非注明,否则均为小宜技术猫原创文章,转载或复制请以超链接形式并注明出处。
发表评论