优点
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项目的话也可以直接在入口文件中导入,变成全局。
多个接口演示: