vue项目 Axios创建拦截器

Axios

- 1. Axios 和 Ajax 简介
- 2. Axios 和 Ajax 的区别
- 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 函数。

在这里插入图片描述

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

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

示例代码

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 请求工具来完成
在这里插入图片描述
示例代码

//导入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，并创建了请求拦截器 和 响应拦截器。
有了拦截器，就可以在 请求服务前 或 得到响应后 统一处理数据。
在这里插入图片描述

示例代码：

//这里边相当于请求的工具，用来定制请求的实例//导入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中定义的响应式数据,都不需要.valueif (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;