axios简易封装

axios封装

由于封装后的 axios 更容易看懂和维护，就决定分享一下。axios官方文档

1. 首先在项目目录中的 src 文件夹中新建一个 requests 的文件夹，其次在该文件夹中新建一个 index.js 的 js 文件，在其中书写 axios 的封装代码
2. 安装 axios,

   yarn add axios

   或者

   npm install axios

3. 在 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\'})}

1. 请求使用：在需要请求后端接口的文件内（这里以 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)}});

1. 使用封装后的 axios的好处：简洁，容易维护。把所有的 axios 方法先集中放在几个 js 文件内（如上述代码中的login.js文件中的 login方法以及 user 方法）以文件名为分类，分别放置不同页面的 axios 请求，如有接口更换，只需要少量修改对应 js 文件内的方法即可 . . . . . .