14.2 vue-axios实用功能介绍 -TypeScript和Vue从入门到精通(五)

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

### 14.2 Vue-Axios实用功能介绍

在Vue.js项目中，处理HTTP请求是常见的需求之一，无论是从服务器获取数据还是向服务器发送数据。Vue本身并不直接提供HTTP客户端功能，但幸运的是，我们可以通过集成第三方库如axios来实现这一功能。`vue-axios`是一个基于axios的Vue插件，它允许我们以更优雅、更符合Vue风格的方式在Vue组件中使用axios进行HTTP通信。本章节将深入介绍`vue-axios`的几个实用功能，帮助你在Vue项目中高效地使用HTTP服务。

#### 14.2.1 安装与配置

首先，确保你的项目中已经安装了Vue和axios。然后，你可以通过npm或yarn来安装`vue-axios`：

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

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

```javascript
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

// 创建axios实例
const http = axios.create({
  baseURL: 'https://api.example.com', // 你的API基础URL
  timeout: 1000, // 请求超时时间
  // 可以在这里配置更多的axios选项
});

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

// 现在，这个axios实例会作为this.$axios在Vue组件中可用
```

#### 14.2.2 在组件中使用this.$axios

配置好`vue-axios`后，你就可以在Vue组件中通过`this.$axios`来发送HTTP请求了。这种方式使得axios的调用更加集中和易于管理。

##### 示例：获取用户信息

```vue
<template>
  <div>
    <h1>用户信息</h1>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.email }}</p>
  </div>
</template>

在这个例子中，当组件被创建时，`fetchUserInfo`方法会被调用，该方法使用`this.$axios.get`来发送GET请求到`/users/me`端点，并更新组件的`userInfo`数据。

#### 14.2.3 拦截器（Interceptors）

`vue-axios`（实际上是axios）提供了拦截器功能，允许你在请求或响应被`then`或`catch`处理之前拦截它们。这可以用于日志记录、错误处理、请求和响应的转换等。

##### 请求拦截器

```javascript
// 添加请求拦截器
this.$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
// 添加响应拦截器
this.$axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 例如，统一处理错误码
    if (response.data.code !== 200) {
      // 抛出自定义错误
      return Promise.reject(new Error(response.data.message || 'Error'));
    }
    return response;
  }, function (error) {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 处理未授权访问
      store.dispatch('logout');
    }
    return Promise.reject(error);
  });
```

#### 14.2.4 并发请求

在处理多个并发请求时，axios的`axios.all`和`axios.spread`（或在较新版本的axios中直接使用Promise.all和数组解构）非常有用。这允许你同时发送多个请求，并等待所有请求都完成后处理它们的结果。

```javascript
// 使用axios.all和axios.spread（不推荐，仅作演示）
axios.all([
  this.$axios.get('/user/12345'),
  this.$axios.get('/user/profile/12345')
])
.then(axios.spread((userData, userProfile) => {
  // 两个请求现在都执行完成
  console.log('User Data', userData.data);
  console.log('User Profile', userProfile.data);
}));

// 使用Promise.all和数组解构（推荐）
Promise.all([
  this.$axios.get('/user/12345'),
  this.$axios.get('/user/profile/12345')
]).then(([userData, userProfile]) => {
  // 两个请求现在都执行完成
  console.log('User Data', userData.data);
  console.log('User Profile', userProfile.data);
});
```

#### 14.2.5 错误处理

在Vue组件中处理axios请求时，适当的错误处理至关重要。axios的请求方法（如`get`、`post`等）返回一个Promise对象，你可以通过`.catch()`方法来捕获并处理错误。

```javascript
this.$axios.get('/some/url')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    // 处理错误响应
    if (error.response) {
      // 服务器已响应，但状态码不在2xx范围内
      console.error('Error:', error.response.status, error.response.data);
    } else if (error.request) {
      // 请求已发送，但没有收到响应
      console.error('No response received');
    } else {
      // 设置请求时触发了错误
      console.error('Error', error.message);
    }
    // 可以在这里根据错误类型进行不同的处理
  });
```

#### 14.2.6 取消请求

在Vue项目中，有时你可能需要取消正在进行的HTTP请求，以避免在组件销毁后仍然发送请求或接收响应导致的问题。axios提供了一个取消请求的功能，通过创建一个`CancelToken`来实现。

```javascript
const CancelToken = axios.CancelToken;
let cancel;

this.$axios.get('/some/url', {
  cancelToken: new CancelToken(function executor(c) {
    // 这个executor函数接收一个cancel函数作为参数
    cancel = c;
  })
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（这个调用可以放在组件的beforeDestroy钩子中）
cancel('Operation canceled by the user.');
```

#### 总结

`vue-axios`作为Vue项目中处理HTTP请求的得力助手，通过提供简洁的API和丰富的功能，如拦截器、并发请求处理、错误处理以及请求取消等，极大地简化了在Vue应用中与后端服务通信的复杂性。通过本章节的介绍，希望你已经掌握了如何在Vue项目中使用`vue-axios`来高效地处理HTTP请求，并能够在自己的项目中灵活运用这些实用功能。

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

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

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

VUE组件基础与实战

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

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

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

Vue3技术解密

Vue原理与源码解析

Vue面试指南

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

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

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