目录
一、安装axios
npm install axios --save-dev
二、创建文件夹
在根目录的src中创建一个http文件夹,用来存放我们封装的接口。
在http文件夹中创建request.js专门用来封装,api.js专门用来放置我们的接口请求。
三、封装axios
1. 引入axios
import axios from “axios”;
2. 引入vuex
import store from “@/store/index”;
3. 引入vant
import { Toast } from “vant”;
4. 引入我们的环境变量
import baseUrl from “@/config/index”;
5.创建axios实例
const instance = axios.create({
// axios.create 创建axios实例
timeout: 5000,
// 如果请求超过事件,就放弃这个请求
baseUrl
// 域名
})
6. 添加请求拦截
使用 axios实例.interceptors.request.use(成功回调,失败回调);
我们可以在请求拦截中开启loading动画,判断用户是否登录,以及携带token
instance.interceptors.request.use(config => { // config 就是我们一些请求的配置
// 成功回调
Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
});
// vant loading 动画
if (store.state.token) {
// vuex中的token是否是空,如果不为空就设置请求头,携带token
config.headers.Authorization = store.state.token;
}
return config;
// 一定要返回config,否则报错
}, error => {
// 失败回调
return Promise.reject(error);
// 失败返回一个 Promise对象
})
7. 响应拦截
使用 axios实例.interceptors.response.use(成功回调,失败回调);
我们在响应拦截中,可以关闭loading动画,判断返回的状态码来做响应的操作
instance.interceptors.response.use(response => { // response 服务器返回的数据
// 成功回调
Toast.clear();
return response;
// 必须返回有返回值
}, error => {
// 失败回调
return Promise.reject(error);
// 必须有返回值
})
// 响应拦截
8. 导出封装的axios函数
export default (url, method, params) => {
// url请求地址
// method 请求方式
// params 参数
return instance({
// 返回我们的axios实例
url:url,
method:method,
params:params,
}).then(res => {
// res 我们后端返回的数据
if (res.status >= 200 && res.status < 300) {
// 如果我们返回的数据状态码为200-300之间就是成功
return res;
} else {
return Promise.reject(res.data);
// 失败返回一个Promise对象
}
}).catch(err => {
return Promise.reject(err);
// 请求失败返回一个Promise对象
})
}
四、api统一管理
1.引入我们封装的axios
import http from “./request”
2.使用async/await进行请求优化
async function getIndex(obj) {
let res = await http('url',"get",{id:1});
// 我们使用await等待请求结果出来
return res;
// 返回这个结果
}
// 比如这是我们主页的数据
// 可以写多个
3.导出
export {
getIndex,
}
注意:导出多个的时候只能使用export,导出的时候函数中间使用逗号隔开
五、使用
比如我们在主页要使用这个接口
<template>
<div class="home">
</div>
</template>
<script>
import { getIndex } from "@/http/api";
// @表示我们的 src文件夹
// 首先我们需要引入响应的接口函数,使用解构赋值的方式
// 当导入多个的时候,函数名之间使用逗号隔开
export default {
data() {
return {};
},
mounted() {
getIndex().then((res) => {
// 调用函数即可
// res就是我们的数据
console.log(res);
}).catch(err=>{
console.log(err)
// err是我们的报错
});
},
};
</script>