axios的介绍及使用案例

Axios中文官方文档

使用场景

Axios在Vue中是用来向后端发送请求的，类似于Ajax

安装Axios

在使用 Axios 之前，需要将其安装到项目中。可以使用 npm 或 yarn 进行安装：

npm install axios --save
# 或
yarn add axios

引入Axios

在使用 Axios 发送 HTTP 请求之前，需要将它引入到我们的代码中：

import axios from 'axios';

使用Axios

Axios 提供了多种方法用于发送不同类型的 HTTP 请求，如 GET、POST、PUT、DELETE 等。

// 引入 Axios
import axios from 'axios';

// 发送 GET 请求
axios.get('https://xxxxxxx.yyyyyyy.com/posts')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误信息
    console.error(error);
  });

上述代码使用 Axios 发送一个 GET 请求获取数据。在 then 回调中，处理了请求成功的响应数据，并在 catch 回调中处理了请求失败的错误信息。

在请求时可以附带需要的参数或数据。以下是一个使用 Axios 发送 POST 请求的案例：

// 引入 Axios
import axios from 'axios';

// 发送 POST 请求
axios.post('https://xxxxx.yyyy.com/posts', {
    title: 'New Post',
    body: 'This is the content of the new post.',
    userId: 1
  })
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误信息
    console.error(error);
  });

在上述代码中，我们使用 Axios 的 post 方法发送了一个 POST 请求，并在请求体中附带了一个包含标题、内容和用户ID的对象。

设置请求头和请求参数：

我们可以通过配置 Axios 实例来设置请求头和请求参数，这些配置将应用于所有使用该实例的请求。例如，我们可以设置请求头中的授权信息，或者设置公共的请求参数。

import axios from 'axios';

// 创建 Axios 实例
const service= axios.create({
  baseURL: 'https://yyyyy.xxxx.com',
  headers: {
    Authorization: 'Bearer YOUR_ACCESS_TOKEN'
  }
});

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

在上述代码中，我们使用 axios.create 方法创建了一个 Axios 实例，并设置了 baseURL 和授权头部。然后，我们使用该实例发送了一个 GET 请求，该请求将自动携带设置的授权头部。