vue项目 Axios创建拦截器

Axios

- [1. Axios 和 Ajax 简介](#1. Axios 和 Ajax 简介)
- [2. Axios 和 Ajax 的区别](#2. Axios 和 Ajax 的区别)
- [3. 从按钮到 Axios请求后端接口的大致顺序](#3. 从按钮到 Axios请求后端接口的大致顺序)

1. Axios 和 Ajax 简介

Ajax（Asynchronous JavaScript and XML）不是一种技术，而是一个编程技术概念，核心是通过 XMLHttpRequest 对象实现异步通信。

Axios 是一个独立的库，它既在浏览器环境中使用了 XMLHttpRequest，又在服务端使用原生node.js http 模块。

2. Axios 和 Ajax 的区别

特性	原生 Ajax（XMLHttpRequest）	Axios
使用方式	需要手动创建和管理 XMLHttpRequest 对象	提供简洁的 API，如 axios.get() 、axios.post()
异步处理	使用回调函数	基于 Promise，支持 async/await
功能扩展	功能有限，需手动实现	内置拦截器、请求取消、自动转换 JSON 等功能
跨平台支持	仅限浏览器	支持浏览器和 Node.js

3. 从按钮到 Axios请求后端接口的大致顺序

点击按钮

点击按钮时，触发 @click 点击事件，就到了 login 函数。

javascript 复制代码

<!-- 登录按钮 -->
<el-form-item>
    <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
</el-form-item>

login里请求接口的函数，写在了 user.js 文件中

示例代码

javascript 复制代码

import { userLoginService } from '@/api/user.js'
import { ElMessage } from 'element-plus'

//导入路由 router
import {useRouter} from 'vue-router'
const router = useRouter();

//导入 有Pinia函数的token.js文件
import { useTokenStore } from '@/stores/token'
const tokenStore = useTokenStore();

//登录函数 login
const login = async () => {
    //调用接口，完成登录
    let result = await userLoginService(registerData.value);
    //alert(result.msg ? result.msg : '登录成功');
    ElMessage.success(result.msg ? result.mag : '登录成功');

    //把得到的token存储到pinia中
    tokenStore.setToken(result.data);

    //跳转到首页，使用useRouter切换组件，完成跳转
    router.push('/');
}

在 user.js 里的请求，都统一用 request.js 请求工具来完成

示例代码

javascript 复制代码

//导入request.js请求工具
import request from '@/utils/request.js'

//提供调用主次接口的函数
export const userRegisterService = (registerData) => {
    //借助于UrlSearchParams完成传递
    const params = new URLSearchParams();
    for (let key in registerData) {
        params.append(key, registerData[key]);
    }
    return request.post('/user/register', params);
}

export const userLoginService = (loginData) => {
    const params = new URLSearchParams();
    for (let key in loginData) {
        params.append(key, loginData[key])
    }
    return request.post('/user/login', params);
}

在请求工具 request.js 里，导入了Axios，并创建了请求拦截器 和 响应拦截器 。

有了拦截器 ，就可以在 请求服务前 或 得到响应后 统一处理数据。

示例代码：

javascript 复制代码

//这里边相当于请求的工具，用来定制请求的实例

//导入axios: npm install axios
import axios from 'axios';

//导入Message消息提示
import { ElMessage } from 'element-plus';

//定义一个变量，记录公共的前缀，baseURL
// const baseURL = 'http://localhost:8080';
// 这里的'/api'只是给后台访问的请求路径添加一个标识
const baseURL = '/api';

/*  axios.create()方法，把baseURL作为参数传入，
    该方法返回一个请求的实例instance,
    以后发送请求时，就不用axios.get了，
    直接用instance.get就可以 */
const instance = axios.create({ baseURL })

/* axios提供的拦截器,
    在请求或响应，被then或catch处理前拦截
    也就是在请求发出之前，有一个请求拦截器
    或在响应到达之前，有一个响应拦截器 */


//导入Pinia
import { useTokenStore } from '@/stores/token';
//添加请求拦截器
instance.interceptors.request.use(
    (config) => {
        //请求前的回调
        const tokenStore = useTokenStore();
        //在pinia中定义的响应式数据,都不需要.value
        if (tokenStore.token) {
            config.headers.Authorization = tokenStore.token;
        }
        return config
    },
    (err) => {
        //请求错误的回调
        Promise.reject(err);
    }
)

/* 由于模块加载的顺序，不能这样导入
    import { useRoute } from 'vue-router';
    const router = useRoute(); 
*/
//这样导入就能用了
import router from '@/router'

//添加响应拦截器(这个拦截器本身就是异步的)
instance.interceptors.response.use(
    //成功的回调
    result => {
        //判断业务状态码
        if (result.data.code === 0) {
            return result.data;
        }

        //操作失败
        ElMessage.error(result.data.msg ? result.data.msg : '服务异常');

        //异步操作的状态转换为失败
        return Promise.reject(result.data);
    },
    //失败的回调
    err => {
        //判断响应状态码，若为401，则说明未登录，提示请登录，并跳转到登录页面
        if(err.response.status === 401){
            ElMessage.error('请先登录');
            router.push('/login');
        }else{
            ElMessage.error('服务异常');
        }

        //异步的状态转化成失败的状态
        return Promise.reject(err);
    }
)

//把请求的实例instance导出,供其他地方调用
export default instance;

上述代码中的 const baseURL = '/api' ，在另一篇文章 vue处理跨域问题里有详细描述。

vue项目 Axios创建拦截器

Axios

1. Axios 和 Ajax 简介

2. Axios 和 Ajax 的区别

3. 从 按钮 到 Axios请求后端接口的 大致顺序

3. 从按钮到 Axios请求后端接口的大致顺序