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）
// 以及 data
export function request(options) {
return new Promise((resolve, reject) => {
// 创建 axios 实例
const instance = axios.create({
// baseUrl：请求后端的前部分的url
baseURL: "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 文件内的方法即可 . . . . . .