axios封装
由于封装后的 axios 更容易看懂和维护,就决定分享一下。axios官方文档
- 首先在项目目录中的 src 文件夹中新建一个 requests 的文件夹,其次在该文件夹中新建一个 index.js 的 js 文件,在其中书写 axios 的封装代码
- 安装 axios,
yarn add axios
或者
npm install axios
- 在 index.js 文件内书写以下代码。(基本封装)
import axios from \"axios\";// 封装 axios 方法,返回值是 Promise// options 参数为一些 url(请求路径),method(请求方法,默认为get)// 以及 dataexport function request(options) {return new Promise((resolve, reject) => {// 创建 axios 实例const instance = axios.create({// baseUrl:请求后端的前部分的urlbaseURL: \"http://localhost:8888\",// 设置延迟时间(单位:毫秒)timeout: 5000,});// 响应拦截器instance.interceptors.response.use((res) => {// console.log(res.data);if (res.status === 200) {// console.log(res);return res.data;} else {// console.log(res);}});// 请求拦截器instance.interceptors.request.use((config) => {// console.log(config);return config;});// 通过实例进行网络请求instance(options).then((res) => {resolve(res);}).catch((err) => {reject(err);});});}
封装的代码中有涉及到返回值为 Promise ,如有还未理解的小伙伴可观看阮老师的 ES6教程: 阮一峰的ES6教程
4. 如何调用封装:在当前目录下(request)下面, index.js 同级,新建一个 login.js (名字可随意)。代码如下:
// 使用结构获得 request方法import { request } from \'./index\'// post axios 请求export function login(data) {return request({url: \'/admin/login\',method: \'post\',data})}// get axios 请求export function user() {return request({url: \'/admin/user\'})}
- 请求使用:在需要请求后端接口的文件内(这里以 Login页面为例)
先 import 进 login 方法
import { login } from \"../../requests/login\";
在需要发送请求的地方敲入以下代码:
// 此处的 data 为需要提交到后端的数据(login的提交方式为 POST)login(data).then((res) => {if (res.status === 200) {console.log(res)} else {console.log(res)}});
- 使用封装后的 axios的好处:简洁,容易维护。把所有的 axios 方法先集中放在几个 js 文件内(如上述代码中的login.js文件中的 login方法以及 user 方法)以文件名为分类,分别放置不同页面的 axios 请求,如有接口更换,只需要少量修改对应 js 文件内的方法即可 . . . . . .