基础

安装axios

npm i axios

基础配置： 1.接口基地址2.接口超时时间3.请求拦截器4.响应拦截器

在src中创建文件utils/http.js，如下图

//1.导入axios
import axios from "axios";
//2.创建axios实例
const http = axios.create({
    //配置基地址  坑1：注意是baseURL不是baseUrl哈
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    //配置超时时间
    timeout: 5000,
});
//坑2：注意两个拦截器，一个是request一个是response哈
//axios请求拦截器
http.interceptors.request.use(config => {
    return config
}, e => Promise.reject(e));
//axios响应拦截器
http.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e);
})
// 3.导出
export default http;

这里的测试直接在main.ts里完成的哈，但在实际开发中应在src目录下创建apis/xxApi.js，如下：

测试：

//1.引入封装的axios实例
import http from "@/utils/http.js"
//2.使用export导出接口
function getCateGory() {
    return http({
        url:'接口地址（如：creator/content/article/drafts）'//坑：注意接口地址一开始不加'/'
    })
}
getCateGory().then(res=>{
    //dosomething
})

Token拦截

Token作为用户标识，在很多个接口中都需要携带Token才可以正确获取数据，所以需要在接口调用时携带Token。为了统一控制，一般采取请求拦截器携带的方案。

在Axios请求拦截器可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到请求header中，格式按照后端要求的格式进行拼接处理

代码如下：

//axios请求拦截器
http.interceptors.request.use(config => {
    const userStore = userStore();
    //获取token数据 cookies或localStorage中一般会存储token
    const token = userStore.userInfo.token;
    //添加token标识
    if(token){
        //坑：注意Bearer首字母大小且 之后待一个空格后再带值！！！！！！！！！！！
        config.headers.Authorization = `Bearer ${token}`;
    }
    //拼接数据  token数据一般是放在header请求头中
    return config
}, e => Promise.reject(e));

Token失效处理

Token的有效性可以保持一定时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报状态码错误，这时需要我们做额外处理，这里有两个问题需要解决一下

1.哪个接口调用时出现错误，在什么位置拦截错误

这个可以在axios响应拦截器里实现拦截

2.检测到错误后干什么

Token代表用户登陆信息，失效代表登陆过期，需要重新登陆所以，检测到错误后，一般是清除Token信息（用户信息），跳转登陆页面，这个看项目要求哈（但项目一般都是这样做的）

代码实现：

//axios响应拦截器
http.interceptors.response.use(res => res.data, e => {
    //可以在这里提示错误
    if(e.response.status == 401){
        const userStore = userStore();
        const router = useRouter();
        // 1.清除用户信息 触发action
        userStore.clearUserInfo();
        // 2.跳转到登录页
        router.push('/login')
    }
    return Promise.reject(e);
})

如何在vue项目中配置axios

基础

Token拦截

Token失效处理