Vue 中 Axios 配置指南

Axios 是一个基于 Promise 的 HTTP 客户端，实用于浏览器和 Node.js 环境。在 Vue 项目中，Axios 常用于与后端 API 进行通讯。本文将介绍如安在 Vue 项目中配置和使用 Axios。
一、安装 Axios

起首，你需要在 Vue 项目中安装 Axios。通过 npm 或 yarn 安装：

1. [/code] [code]npm install axios --save
2. # 或
3. yarn add axios

复制代码

二、全局配置 Axios

在 Vue 项目中，你可以在项目的入口文件（如 main.js）中进行 Axios 的全局配置。这样，在整个项目中都可以使用这个配置。

1. [/code] [code]import Vue from 'vue';
2. import axios from 'axios';
4. // 创建 axios 实例
5. const instance = axios.create({
6. baseURL: 'https://api.example.com', // 设置基础 URL
7. timeout: 5000, // 设置请求超时时间
8. headers: {
9. 'Content-Type': 'application/json'
10. }
11. });
13. // 请求拦截器
14. instance.interceptors.request.use(config => {
15. // 在发送请求之前做些什么，例如添加 token
16. const token = localStorage.getItem('token');
17. if (token) {
18. config.headers['Authorization'] = `Bearer ${token}`;
19. }
20. return config;
21. }, error => {
22. // 对请求错误做些什么
23. return Promise.reject(error);
24. });
26. // 响应拦截器
27. instance.interceptors.response.use(response => {
28. // 对响应数据做点什么
29. return response.data;
30. }, error => {
31. // 对响应错误做点什么
32. return Promise.reject(error);
33. });
35. // 将 axios 实例挂载到 Vue 原型上
36. Vue.prototype.$axios = instance;
38. new Vue({
39. render: h => h(App)
40. }).$mount('#app');

复制代码

三、在组件中使用 Axios

在 Vue 组件中，你可以通过 this.$axios 访问全局配置的 Axios 实例，发起 HTTP 哀求。

1. [/code] [code]<template>
2. <div>
3. <h1>用户列表</h1>
4. <ul>
5. <li v-for="user in users" :key="user.id">{{ user.name }}</li>
6. </ul>
7. </div>
8. </template>
10. <script>
11. export default {
12. data() {
13. return {
14. users: []
15. };
16. },
17. created() {
18. this.fetchUsers();
19. },
20. methods: {
21. async fetchUsers() {
22. try {
23. const response = await this.$axios.get('/users');
24. this.users = response.data;
25. } catch (error) {
26. console.error('获取用户列表失败:', error);
27. }
28. }
29. }
30. };
31. </script>

复制代码

四、局部配置 Axios

如果你只想在某个组件中使用 Axios，而不是全局配置，可以在组件内部直接引入 Axios 并创建实例。

1. [/code]
2. [code]<template>
3. <div>
4. <h1>用户详情</h1>
5. <p>{{ user.name }}</p>
6. </div>
7. </template>
9. <script>
10. import axios from 'axios';
12. export default {
13. data() {
14. return {
15. user: {}
16. };
17. },
18. created() {
19. this.fetchUser();
20. },
21. methods: {
22. async fetchUser() {
23. try {
24. const response = await axios.get('https://api.example.com/users/1');
25. this.user = response.data;
26. } catch (error) {
27. console.error('获取用户详情失败:', error);
28. }
29. }
30. }
31. };
32. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。