16.1 什么是axios-Vue.js从入门到精通(四)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(四)

### 16.1 什么是Axios

在深入探讨Vue.js的实际应用与开发过程中，我们不可避免地会遇到与后端服务进行数据交互的场景。无论是从服务器获取数据以填充到页面上，还是将用户输入的数据提交到服务器进行处理，HTTP请求都是这一过程中不可或缺的一环。Vue.js作为一个专注于构建用户界面的渐进式框架，本身并不直接提供发送HTTP请求的功能。因此，我们需要借助一些第三方库来帮助我们完成这些任务，而`axios`就是这样一个广受欢迎且功能强大的HTTP客户端库。

#### 16.1.1 Axios简介

`axios`是一个基于Promise的HTTP客户端，适用于浏览器和node.js环境。它提供了丰富的API来发送各种类型的HTTP请求（如GET、POST、PUT、DELETE等），并且支持请求和响应的拦截、转换请求数据和响应数据、取消请求以及自动转换JSON数据等功能。由于其简单易用、功能强大且社区支持活跃，`axios`成为了Vue.js项目中处理HTTP请求的标配之一。

#### 16.1.2 为什么选择Axios

在Vue.js项目中，虽然还有其他HTTP客户端库可供选择（如Fetch API、XMLHttpRequest等），但`axios`因其独特的优势而备受青睐：

1. **基于Promise**：`axios`返回的是一个Promise对象，这使得异步请求的处理变得非常简洁和直观。你可以使用`async/await`语法或者`.then()`和`.catch()`链来处理请求的成功或失败情况。

2. **浏览器和Node.js兼容性**：无论是前端项目还是后端Node.js项目，`axios`都能无缝工作，无需担心环境差异带来的问题。

3. **请求和响应的拦截**：`axios`允许你在请求或响应被`then`或`catch`处理之前拦截它们。这可以用于在发送请求前添加token、处理响应数据等场景。

4. **自动转换JSON数据**：默认情况下，`axios`会自动将请求的数据转换为JSON格式发送，并将接收到的响应数据自动转换为JSON对象（如果Content-Type是application/json）。这大大简化了数据处理的复杂性。

5. **客户端支持防御XSRF**：当使用浏览器进行请求时，`axios`会自动从cookie中读取XSRF令牌（如果设置了的话），并将其添加到请求头中，以帮助防御跨站请求伪造（XSRF）攻击。

6. **取消请求**：`axios`支持请求取消功能，这在你需要取消正在进行的HTTP请求时非常有用（比如，在用户离开页面时取消尚未完成的请求）。

7. **丰富的配置选项**：`axios`提供了丰富的配置选项，允许你根据需求自定义请求行为，如设置请求头、超时时间、响应类型等。

#### 16.1.3 安装Axios

在Vue.js项目中使用`axios`之前，你需要先将其安装到你的项目中。如果你正在使用npm或yarn作为包管理工具，可以通过以下命令来安装`axios`：

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

安装完成后，你就可以在你的Vue组件或JavaScript文件中引入并使用`axios`了。

#### 16.1.4 基本使用

`axios`的基本使用非常简单。以下是一个使用`axios`发送GET请求的示例：

```javascript
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });
```

如果你需要发送POST请求并携带JSON数据，可以这样做：

```javascript
axios.post('https://api.example.com/users', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
```

`axios`还允许你通过配置对象来定制请求，如设置请求头、超时时间等：

```javascript
axios({
  method: 'post',
  url: 'https://api.example.com/users',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {'X-Custom-Header': 'foobar'},
  timeout: 1000,
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  if (error.response) {
    // 请求已发出，但服务器响应的状态码不在 2xx 的范围内
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已经发起，但没有收到响应
    console.log(error.request);
  } else {
    // 设置请求时触发了一些错误
    console.log('Error', error.message);
  }
  console.log(error.config);
});
```

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

`axios`的拦截器功能允许你在请求或响应被`then`或`catch`处理之前拦截它们。这可以用于在请求发送前添加token、统一处理错误、转换响应数据等场景。

- **请求拦截器**：

```javascript
  axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 例如，添加token到请求头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  ```

- **响应拦截器**：

```javascript
  axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data; // 直接返回响应数据，而不是整个响应对象
  }, function (error) {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 例如，处理未授权访问
      alert('未授权访问，请重新登录');
    }
    return Promise.reject(error);
  });
  ```

#### 16.1.6 取消请求

`axios`支持取消正在进行的HTTP请求。这在你需要取消一个长时间运行或不再需要的请求时非常有用。你可以使用`CancelToken`来取消请求：

```javascript
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/some/long/request', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');
```

#### 16.1.7 总结

`axios`作为Vue.js项目中处理HTTP请求的强大工具，凭借其简单易用、功能丰富和社区支持活跃等优势，成为了许多开发者的首选。通过本文的介绍，我们了解了`axios`的基本概念、安装方法、基本使用方式以及高级功能（如拦截器、取消请求等）。掌握`axios`的使用，将极大地提升你在Vue.js项目中进行前后端数据交互的效率和质量。

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

Vue源码完全解析

Vue面试指南

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

Vue3技术解密

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

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

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

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

VUE组件基础与实战

Vue原理与源码解析

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

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