axios二次封装教程

优点

axios二次封装接口，方便管理所有接口，提高可维护性

---

具体操作步骤

一、安装 axios

npm i axios

二、创建 api 文件夹

1.request.js

用于管理请求配置

// 引入 axios
import axios from 'axios'

const requests = axios.create({
    // 配置基础路径
    baseURL:'http://localhost:3000',
    timeout:3000,
    // 请求头
    /* headers:{} */
})

// 配置拦截器
requests.interceptors.request.use(config => {
    // 请求带token
    /* config.headers.Authorization = window.sessionStorage.getItem('token') */
    return config
})

// 对应拦截器
requests.interceptors.response.use((res) => {
    // 请求成功的回调函数
    return  res.data;
},() => {
    // 请求失败的回调函数
    return Promise.reject('fail')
})
// 对外暴露
export default requests;

2.index.js

用于管理所有的请求，这里演示一个test接口，由于request.js 配置了 baseURL，所以这里的url只需要填写 /test

// 导入封装好的axios请求文件
import requests from "./request";

// 测试接口
export const Test = () => {
    return  requests({
        url: '/test',
        method: 'GET',
    })
}

3.在页面中调用接口

先引入接口文件，因为接口文件名字是index，所以引入时可以省略

import {Test} from "../api"

因为 axios 返回的是 promise 对象，所以用await进行解析

// test 函数，触发就发送请求
async test() {
	try {
		// 调用接口
		let a = await Test()
		// 输出请求后的返回值
		console.log(a)
	} catch(error){
		// 请求失败的回调
		console.log(error)
	}
}

4.请求成功时

5.请求失败时

总结

把所有接口都放在一起，可以便捷管理。可以像本文一样按需引入，如果是vue项目的话也可以直接在入口文件中导入，变成全局。

多个接口演示：