16.2 引入axios-Vue.js从入门到精通(四)

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

### 16.2 引入axios：Vue.js中的HTTP通信利器

在Vue.js项目中，与后端服务器进行数据交互是一项核心任务。无论是获取数据以填充到页面上，还是向服务器提交表单数据，都需要一种可靠且高效的方式来处理HTTP请求。Vue.js本身是一个专注于视图层的库，不直接提供HTTP通信的功能，但幸运的是，我们可以轻松地集成第三方库来实现这一需求。在众多HTTP客户端库中，axios因其易用性、强大的功能集以及良好的社区支持，成为了Vue.js项目中广泛使用的选择。本章将详细介绍如何在Vue.js项目中引入axios，并通过实例展示其使用方法。

#### 16.2.1 axios简介

axios是一个基于Promise的HTTP客户端，适用于浏览器和node.js。它提供了简单易用的API来发送异步HTTP请求到REST端点，并处理响应。axios的主要特性包括：

- **从浏览器中创建XMLHttpRequests**
- **从node.js创建http请求**
- **支持Promise API**
- **拦截请求和响应**
- **转换请求数据和响应数据**
- **取消请求**
- **自动转换JSON数据**
- **客户端支持防御XSRF（跨站请求伪造）**

#### 16.2.2 安装axios

在Vue.js项目中引入axios，首先需要通过npm或yarn等包管理工具将其安装为项目依赖。打开终端（或命令提示符），定位到你的Vue.js项目目录，然后执行以下命令之一来安装axios：

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

安装完成后，axios将被添加到你的`node_modules`目录，并且你可以在项目的任何地方通过`require`或`import`语句来引入它。

#### 16.2.3 在Vue组件中使用axios

在Vue组件中，你可以根据需要，在生命周期钩子（如`created`或`mounted`）、方法中或计算属性中引入并使用axios来发送HTTP请求。以下是一个在Vue组件中使用axios获取数据并显示到页面上的基本示例。

##### 示例：使用axios在Vue组件中获取数据

首先，在你的Vue组件中引入axios：

```javascript
<script>
// 引入axios
import axios from 'axios';

export default {
  data() {
    return {
      // 声明一个数组来存储从后端获取的数据
      items: []
    };
  },
  created() {
    // 在组件创建后立即获取数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 使用axios发送GET请求
      axios.get('https://api.example.com/items')
        .then(response => {
          // 处理成功情况
          this.items = response.data;
        })
        .catch(error => {
          // 处理错误情况
          console.error('There was an error!', error);
        });
    }
  }
};
</script>
```

在上面的示例中，我们首先在组件的`<script>`标签中引入了axios。然后，在组件的`data`函数中定义了一个`items`数组，用于存储从后端API获取的数据。在`created`生命周期钩子中，我们调用了`fetchData`方法，该方法使用axios发送了一个GET请求到指定的URL。当请求成功时，我们更新`items`数组为响应中的数据；如果请求失败，则通过`console.error`打印错误信息。

#### 16.2.4 发送POST请求

除了GET请求外，axios还支持发送其他类型的HTTP请求，如POST。以下是一个使用axios发送POST请求以向服务器提交数据的示例：

```javascript
methods: {
  submitForm() {
    const formData = {
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

axios.post('https://api.example.com/users', formData)
      .then(response => {
        console.log('Data submitted successfully', response);
      })
      .catch(error => {
        console.error('Error submitting data', error);
      });
  }
}
```

在这个例子中，我们创建了一个名为`formData`的对象，包含了要提交的数据。然后，我们使用`axios.post`方法发送了一个POST请求到指定的URL，并将`formData`作为请求体发送。请求成功或失败时，我们分别打印了成功信息或错误信息。

#### 16.2.5 配置axios实例

为了避免在每个请求中都重复相同的配置（如基础URL、请求头、超时时间等），你可以创建一个axios实例，并对其进行配置。然后，在整个项目中重复使用这个配置好的实例。

```javascript
// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例发送请求
instance.get('/items')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
```

#### 16.2.6 请求拦截与响应拦截

axios提供了请求拦截器和响应拦截器的功能，允许你在请求或响应被`then`或`catch`处理之前对它们进行拦截和处理。这对于在发送请求前设置统一的请求头、在收到响应前处理数据或错误等场景非常有用。

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 处理未授权的情况
      // 例如，重定向到登录页面
    }
    return Promise.reject(error);
  });
```

#### 16.2.7 总结

axios作为Vue.js项目中处理HTTP请求的强大工具，凭借其简洁的API、丰富的功能集以及良好的社区支持，成为了众多开发者的首选。通过本章的学习，你应该已经掌握了如何在Vue.js项目中引入axios、发送GET和POST请求、配置axios实例以及使用请求和响应拦截器的基本方法。这些技能将帮助你更加高效地构建与后端服务器进行数据交互的Vue.js应用。随着你对axios的进一步探索和实践，你将能够更深入地挖掘其潜力，实现更复杂的数据交互逻辑。

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

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

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

移动端开发指南

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

Vue原理与源码解析

VUE组件基础与实战

Vue3技术解密

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

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

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

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

Vue源码完全解析