14.1.2 使用vue-axios进行数据请求 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 14.1.2 使用vue-axios进行数据请求

在Vue.js项目中，与后端服务进行数据交互是一项核心功能。Vue.js本身是一个构建用户界面的渐进式框架，它不直接提供HTTP请求的功能。然而，通过集成第三方库如axios，我们可以轻松地在Vue应用中实现数据的请求与响应处理。`vue-axios`是一个Vue插件，它使得在Vue组件中使用axios变得更加方便和直观。本章节将详细介绍如何在Vue项目中安装、配置`vue-axios`，并展示如何使用它进行数据请求。

#### 14.1.2.1 安装vue-axios和axios

首先，你需要确保你的项目中已经安装了axios。axios是一个基于Promise的HTTP客户端，适用于浏览器和node.js。如果尚未安装，可以通过npm或yarn来安装axios。

```bash
npm install axios
# 或者
yarn add axios
```

接下来，安装`vue-axios`插件，它允许你以Vue插件的形式使用axios，从而可以在Vue组件中通过`this.$axios`来访问axios实例。

```bash
npm install vue-axios
# 或者
yarn add vue-axios
```

#### 14.1.2.2 配置vue-axios

安装完`vue-axios`和axios之后，你需要在Vue项目中配置这个插件。这通常在项目的入口文件（如`main.js`或`main.ts`）中进行。

```javascript
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

// 创建一个axios实例
const http = axios.create({
  baseURL: 'https://api.example.com', // API的base_url
  timeout: 1000, // 请求超时时间
  headers: {'X-Custom-Header': 'foobar'} // 自定义请求头
});

// 让Vue使用axios
Vue.use(VueAxios, http);

// 现在，在Vue组件中，你可以通过this.$axios来访问axios实例
new Vue({
  render: h => h(App),
}).$mount('#app');
```

#### 14.1.2.3 在Vue组件中使用vue-axios

一旦`vue-axios`被配置好，你就可以在Vue组件中通过`this.$axios`来发送HTTP请求了。以下是一些常见的使用场景。

##### 1. 发送GET请求

```javascript
export default {
  data() {
    return {
      userInfo: null,
    };
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo() {
      try {
        const response = await this.$axios.get('/user/info');
        this.userInfo = response.data;
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    },
  },
};
```

##### 2. 发送POST请求

```javascript
methods: {
  async createUser(userData) {
    try {
      const response = await this.$axios.post('/user', userData);
      console.log('User created successfully:', response.data);
    } catch (error) {
      console.error('Failed to create user:', error);
    }
  },
},
```

##### 3. 发送PUT请求

```javascript
methods: {
  async updateUser(userId, userData) {
    try {
      const response = await this.$axios.put(`/user/${userId}`, userData);
      console.log('User updated successfully:', response.data);
    } catch (error) {
      console.error('Failed to update user:', error);
    }
  },
},
```

##### 4. 发送DELETE请求

```javascript
methods: {
  async deleteUser(userId) {
    try {
      const response = await this.$axios.delete(`/user/${userId}`);
      console.log('User deleted successfully:', response.data);
    } catch (error) {
      console.error('Failed to delete user:', error);
    }
  },
},
```

#### 14.1.2.4 拦截请求和响应

axios提供了请求和响应拦截器，允许你在请求或响应被`then`或`catch`处理之前对它们进行拦截。这在处理全局错误、设置请求头、统一处理响应数据等方面非常有用。

##### 添加请求拦截器

```javascript
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 例如，设置token
    if (store.getters.token) {
      config.headers.Authorization = `Bearer ${store.getters.token}`;
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
```

##### 添加响应拦截器

```javascript
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 例如，检查响应状态码
    if (response.status === 200) {
      return response.data; // 只返回数据部分
    } else {
      // 处理错误情况
      return Promise.reject(new Error('Error ' + response.status));
    }
  }, function (error) {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 处理未授权情况
      router.push('/login');
    }
    return Promise.reject(error);
  });
```

#### 14.1.2.5 注意事项

- **错误处理**：确保在发送请求时妥善处理错误，避免应用因未捕获的异常而崩溃。
- **请求超时**：根据API的响应时间和网络状况，合理设置请求超时时间。
- **安全性**：在发送敏感信息（如用户凭证）时，确保使用HTTPS协议，并考虑使用HTTP Only和Secure标志的Cookie来存储敏感数据。
- **性能优化**：对于频繁请求的数据，考虑使用缓存策略来减少不必要的网络请求。

通过本章节的学习，你应该能够掌握在Vue项目中如何安装、配置`vue-axios`，以及如何在Vue组件中通过`this.$axios`来发送HTTP请求。这将为你在开发Vue应用时与后端服务进行数据交互打下坚实的基础。

该分类下的相关小册推荐：

Vue原理与源码解析

TypeScript和Vue从入门到精通(三)

vuejs组件实例与底层原理精讲

Vue3技术解密

TypeScript和Vue从入门到精通(二)

Vue面试指南

VUE组件基础与实战

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(四)

Vue源码完全解析

vue项目构建基础入门与实战

移动端开发指南