网站看不到预览图,怎么做网站流量统计,球队排名世界,桑基图在线制作网站✨✨ 欢迎大家来到景天科技苑✨✨
#x1f388;#x1f388; 养成好习惯#xff0c;先赞后看哦~#x1f388;#x1f388; #x1f3c6; 作者简介#xff1a;景天科技苑 #x1f3c6;《头衔》#xff1a;大厂架构师#xff0c;华为云开发者社区专家博主#xff0c;…
✨✨ 欢迎大家来到景天科技苑✨✨ 养成好习惯先赞后看哦~ 作者简介景天科技苑 《头衔》大厂架构师华为云开发者社区专家博主阿里云开发者社区专家博主CSDN全栈领域优质创作者掘金优秀博主51CTO博客专家等。 《博客》Python全栈Golang开发云原生开发前后端框架PyQt5和Tkinter桌面开发小程序开发人工智能js逆向App逆向网络系统安全数据分析Djangofastapiflask等框架云原生K8S集群搭建与管理linuxshell脚本等实操经验网站搭建数据库等分享。 所属的专栏前端零基础实战进阶教学 景天的主页景天科技苑 Vue中Axios拦截器
在Vue项目中Axios是一个非常流行的HTTP客户端用于发送请求和接收响应。Axios拦截器是Axios的一个强大功能它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截。通过拦截器你可以添加请求头、处理请求参数、处理错误等。本文将结合实际案例详细介绍如何在Vue中使用Axios拦截器。
一、安装Axios
首先你需要在Vue3项目中安装Axios。你可以使用npm或yarn等包管理工具进行安装。
npm install axios或者
yarn add axios二、创建Axios实例
在Vue3项目中通常会在项目的某个地方创建一个Axios实例并对其进行配置。你可以将Axios实例放在一个单独的文件中例如src/axios.js。
// src/axios.js
import axios from axios;// 创建Axios实例
const axiosInstance axios.create({baseURL: // 你的基础URL, // 设置请求的baseURLtimeout: 5000, // 设置请求超时时间
});// 导出Axios实例
export default axiosInstance;在上面的代码中我们使用axios.create方法创建了一个Axios实例并传递了一些配置选项例如baseURL和timeout。
三、设置请求拦截器
请求拦截器允许你在请求发送之前对请求进行处理。你可以在Axios实例中使用interceptors.request.use方法来添加请求拦截器。
// src/axios.js
import axios from axios;// 创建Axios实例
const axiosInstance axios.create({baseURL: // 你的基础URL,timeout: 5000,
});// 添加请求拦截器
axiosInstance.interceptors.request.use((config) {// 在发送请求之前做些什么// 例如添加请求头const token localStorage.getItem(token);if (token) {config.headers[Authorization] Bearer ${token};}// 处理请求参数// config.params {// ...config.params,// key: value,// };return config;},(error) {// 对请求错误做些什么return Promise.reject(error);}
);// 导出Axios实例
export default axiosInstance;在上面的代码中我们添加了一个请求拦截器。在拦截器中我们检查本地存储中是否存在token如果存在则将其添加到请求头中。你还可以对请求参数进行处理例如添加或修改参数。
四、设置响应拦截器
响应拦截器允许你在响应返回之后对响应进行处理。你可以在Axios实例中使用interceptors.response.use方法来添加响应拦截器。
// src/axios.js
import axios from axios;// 创建Axios实例
const axiosInstance axios.create({baseURL: // 你的基础URL,timeout: 5000,
});// 添加请求拦截器同上// 添加响应拦截器
axiosInstance.interceptors.response.use((response) {// 对响应数据做些什么// 例如处理响应数据格式// response.data {// ...response.data,// key: value,// };return response;},(error) {// 对响应错误做些什么const { response } error;if (response) {// 判断错误状态码if (response.status 400) {// 请求错误} else if (response.status 401) {// 未授权请重新登录} else if (response.status 403) {// 拒绝访问403}return Promise.reject(response.data);} else {console.error(网络连接异常请稍后再试);}}
);// 导出Axios实例
export default axiosInstance;在上面的代码中我们添加了一个响应拦截器。在拦截器中我们可以对响应数据进行处理例如修改数据格式。我们还可以根据响应的状态码来处理不同的错误情况。
五、在Vue组件中使用Axios实例
现在我们已经在项目中创建了Axios实例并添加了请求和响应拦截器。接下来我们可以在Vue组件中使用这个Axios实例来发送请求。
!-- src/components/YourComponent.vue --
templatediv数据展示/div
/templatescript
import axiosInstance from ../axios;export default {name: YourComponent,mounted() {axiosInstance.get(/your-endpoint).then(data {console.log(data);}).catch(error {console.error(错误:, error);});},
};
/script在上面的代码中我们在Vue组件的mounted生命周期钩子中使用了Axios实例来发送一个GET请求。请求成功后我们将响应数据打印到控制台。如果请求失败我们将错误信息打印到控制台。
六、封装请求方法
为了更方便地在项目中发送请求我们可以将常用的请求方法封装起来。例如我们可以封装GET和POST请求方法。
// src/api/axios.js
import axios from axios;// 创建Axios实例同上// 封装GET请求方法
export function getRequest(url, params {}) {return axiosInstance.get(url, { params });
}// 封装POST请求方法
export function postRequest(url, data {}) {return axiosInstance.post(url, data);
}现在我们可以在Vue组件中使用封装好的请求方法来发送请求。
!-- src/components/YourComponent.vue --
templatediv数据展示/div
/templatescript
import { getRequest, postRequest } from ../api/axios;export default {name: YourComponent,mounted() {// 使用GET请求方法getRequest(/your-get-endpoint, { param1: value1 }).then(data {console.log(GET请求响应:, data);}).catch(error {console.error(GET请求错误:, error);});// 使用POST请求方法postRequest(/your-post-endpoint, { key: value }).then(data {console.log(POST请求响应:, data);}).catch(error {console.error(POST请求错误:, error);});},
};
/script七、统一管理API接口
在项目中我们可能会有很多API接口。为了方便管理和维护我们可以将这些接口统一管理起来。例如我们可以在src/api目录下创建一个api.js文件并在其中定义所有的API接口。
// src/api/api.js
import { getRequest, postRequest } from ./axios;// 定义用户相关API接口
export class UserApi {static async login(params) {return postRequest(/login, params);}static async register(params) {return postRequest(/register, params);}static async getUserInfo(params) {return getRequest(/userInfo, params);}
}// 定义书籍相关API接口
export class BookApi {static async getBookList(params) {return getRequest(/bookList, params);}
}现在我们可以在Vue组件中使用统一管理好的API接口来发送请求。
!-- src/components/YourComponent.vue --
templatedivbutton clickhandleLogin登录/button/div
/templatescript
import { UserApi } from ../api/api;export default {name: YourComponent,methods: {async handleLogin() {const params {username: admin,password: 123456,};try {const response await UserApi.login(params);console.log(登录成功:, response);} catch (error) {console.error(登录失败:, error);}},},
};
/script
