一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
前言
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
封装
首先我确定一个封装的位置
utils / request.js
然后我们看到文档，我们可以自定义配置一个 axios 的实例 axios.create(【config】)，该新建的 axios 可以使用其对应的方法。这个也就是叫做 axios 的二次封装了，可以方便我们在页面发起请求，更为方便地管理我们的网络请求模块。
如下是我的具体的封装代码
// 引入 import axios from 'axios' // 创建实例 const RMhttp = axios.create({ baseUrl: "http://localhost:8080", // 基地址 timeout: 5000 // 超时时间 }) export default RMhttp // 将该实例对外暴露
然后我开始配置拦截器
// 引入 import axios from 'axios' // 创建实例 const RMhttp = axios.create({ baseUrl: "http://localhost:8080", // 基地址 timeout: 5000 // 超时时间 }) // 配置拦截器 // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); export default RMhttp // 将该实例对外暴露
这样就完成了一个很简单的封装，接下来使用该实例，我新建了一个文件夹来管理我的网络请求api的接口
// 导入实例 import RMhttp from '../utils/request.js' // 封装请求接口 export const getUserInfo = () => { // 这里会返回一个promise对象 return RMhttp.get('/user/getUserInfo') }
这样我在其它页面中使用起来就十分方便了，因为其返回的是一个 Promise
async fetchUserInfo() { const res = await getUserInfo() this.data.userInfo = res.data }
结语
今天是考研的第一天，希望电子科技小组的学长学姐都顺顺利利❤️
