vue项目 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请求后端接口的 大致顺序

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

   

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

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

   示例代码

   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('/');
   }
   

3. 在 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);
   }
   

4. 在请求工具 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;
   

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