「Vue3系列」Vue3 Axios详解

一、Vue3 Axios

在 Vue 3 中，你可以使用 axios 来执行 AJAX 请求。axios 是一个流行的基于 Promise 的 HTTP 客户端，它可以在浏览器和 node.js 中使用。它提供了一种简单的方法来发送 GET 和 POST 请求，并处理响应。

首先，你需要在你的 Vue 3 项目中安装 axios。你可以使用 npm 或 yarn 来安装它：

npm install axios
# 或者
yarn add axios
1
2
3

一旦你安装了 axios，你就可以在你的 Vue 组件中使用它来发送 AJAX 请求。下面是一个简单的例子，展示了如何在 Vue 3 组件中使用 axios 来发送一个 GET 请求：

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const user = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/user');
        user.value = response.data;
      } catch (error) {
        console.error('An error occurred:', error);
      }
    });

    return {
      user
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这个例子中，我们使用了 Vue 3 的 setup 函数来初始化组件的状态和逻辑。我们创建了一个名为 user 的响应式引用，并在组件挂载后（onMounted 生命周期钩子）发送了一个 GET 请求到 https://api.example.com/user。请求成功后，我们将响应的数据赋值给 user.value，这样它就可以在模板中显示了。

如果你需要发送 POST 请求，你可以使用 axios.post 方法。下面是一个发送 POST 请求的例子：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const formData = ref({
      name: '',
      email: ''
    });

    const submitForm = async () => {
      try {
        const response = await axios.post('https://api.example.com/submit', formData.value);
        console.log('Form submitted successfully:', response.data);
      } catch (error) {
        console.error('Failed to submit form:', error);
      }
    };

    onMounted(() => {
      // 可以在这里进行其他初始化操作
    });

    return {
      formData,
      submitForm
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这个例子中，我们定义了一个 formData 引用，用于存储表单数据。我们还定义了一个 submitForm 方法，它使用 axios.post 发送一个 POST 请求到 https://api.example.com/submit，并传递 formData.value 作为请求体。

二、Vue3 Axios 请求配置项

Axios 请求的配置项非常丰富，以下是一些常用的配置项及其说明：

1. url：请求的服务器 URL，是必需的。
2. method：创建请求时使用的 HTTP 方法，如 ‘GET’、‘POST’ 等。如果没有指定，请求将默认使用 ‘GET’ 方法。
3. baseURL：在发送请求时，会自动添加到 url 前面的基础 URL。除非 url 是一个绝对 URL，否则 baseURL 会被使用。
4. headers：自定义请求头的内容，例如：

headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your-token'
}
1
2
3
4

5. params：URL 的查询参数，以对象形式提供，会被序列化成查询字符串添加到 URL 后面。

params: {
  ID: 12345
}
// 请求 URL 会是 http://example.com/items?ID=12345
1
2
3
4

6. paramsSerializer：一个函数，用于序列化 params 对象到 URL 查询字符串。
7. data：作为请求体被发送的数据，通常用于 ‘POST’ 或 ‘PUT’ 请求。
8. timeout：请求超时的毫秒数。超过这个时间，请求将被拒绝。
9. responseType：服务器响应的数据类型，例如 ‘arraybuffer’、‘blob’、‘document’、‘json’、‘text’、‘stream’ 等。
10. withCredentials：表示跨站点访问控制（CORS）请求是否应该携带凭证信息（如 cookies 或 HTTP 认证）。
11. transformRequest：在发送请求之前，修改请求数据的函数或函数数组。
12. transformResponse：在传递给 then 或 catch 之前，修改响应数据的函数或函数数组。
13. validateStatus：定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise 的函数。
14. maxContentLength：定义允许的响应内容的最大长度。
15. maxRedirects：定义在 node.js 中跟随的最大重定向次数。

以上配置项可以在 Axios 的请求方法（如 axios.get(), axios.post() 等）中作为第二个参数传递，也可以在创建 Axios 实例时通过配置对象来设置默认值。

例如，创建一个带有默认配置的 Axios 实例：

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用该实例发送请求
axiosInstance.get('/users')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个例子中，axiosInstance 会使用指定的 baseURL、timeout 和 headers 作为默认值。之后发送的请求只需要提供剩余的特定配置或数据即可。

三、Axios 响应结构

Axios 的响应结构主要包含以下信息：

1. config：这是 Axios 请求的配置信息，包括请求类型、请求的 URL、请求体等。

2. data：这是响应体的结果，也就是服务器返回的数据。Axios 会对服务器返回的结果进行 JSON 解析，将其转换成一个对象，方便开发者对结果进行处理。

3. headers：这是响应的头信息，所有的 header 名称都是小写，可以使用方括号语法访问，例如 response.headers['content-type']。

4. request：这是生成此响应的请求，也就是 Axios 在发送请求时所创建的原生的 AJAX 请求对象。在 Node.js 中，它是最后一个 ClientRequest 实例（inredirects），在浏览器中则是 XMLHttpRequest 实例。

5. status：这是响应的 HTTP 状态码，表示请求的结果状态。

6. statusText：这是响应的 HTTP 状态信息，是一个字符串，描述了状态码的含义，如 ‘OK’、‘Not Found’ 等。

这些信息都可以通过 Axios 的 .then() 方法中的回调函数获取，并对其进行处理。例如：

axios.get('https://api.example.com/data')
  .then(function (response) {
    // 访问响应的数据
    console.log(response.data);

    // 访问响应的头部信息
    console.log(response.headers);

    // 访问响应的配置信息
    console.log(response.config);

    // 访问响应的状态码
    console.log(response.status);

    // 访问响应的状态信息
    console.log(response.statusText);

    // 访问生成此响应的请求对象
    console.log(response.request);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在处理 Axios 响应时，开发者通常最关心的是 data 和 status 字段，因为它们分别包含了服务器返回的数据和请求的结果状态。

四、Axios 拦截器

Axios 拦截器是一种强大的机制，允许你在请求被发送到服务器之前或响应被客户端接收之前对其进行修改或处理。拦截器分为请求拦截器（Request Interceptors）和响应拦截器（Response Interceptors）。

请求拦截器

请求拦截器可以在请求发送到服务器之前进行一些操作，比如添加通用的请求头、修改请求参数、添加身份验证信息等。你可以使用 axios.interceptors.request.use 方法来创建一个请求拦截器。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 例如，添加请求头、身份验证等
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9

响应拦截器

响应拦截器可以在响应到达客户端之前对其进行处理，比如统一处理错误、转换响应数据格式等。你可以使用 axios.interceptors.response.use 方法来创建一个响应拦截器。

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 例如，统一处理错误，转换数据格式等
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  // 例如，统一处理网络错误等
  return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9

拦截器的移除

如果你需要移除某个拦截器，可以使用 axios.interceptors.request.eject 或 axios.interceptors.response.eject 方法，传入你希望移除的拦截器的函数作为参数。

const interceptor = axios.interceptors.request.use(function () {/*...*/});

// 稍后
axios.interceptors.request.eject(interceptor);
1
2
3
4

拦截器的应用场景

1. 请求前处理：在请求发送到服务器之前，你可以使用请求拦截器来添加通用的请求头（如认证信息、用户代理等），或者根据某些条件修改请求参数。
2. 错误处理：你可以使用响应拦截器来统一处理服务器返回的错误，例如，当服务器返回 401 状态码时，你可以自动跳转到登录页面。
3. 数据转换：响应拦截器允许你在数据到达客户端之前对其进行转换，例如，将 JSON 数据转换为 JavaScript 对象，或者将日期字符串转换为日期对象。

通过使用拦截器，你可以更加灵活地控制 Axios 的请求和响应处理流程，提高代码的可维护性和可扩展性。

五、相关链接

1. Vue3官方地址
2. Vue3中文文档
3. 「Vue3系列」Vue3简介及安装
4. 「Vue3系列」Vue3起步/创建项目
5. 「Vue3系列」Vue3指令
6. 「Vue3系列」Vue3 模板语法
7. 「Vue3系列」Vue3 条件语句/循环语句
8. 「Vue3系列」Vue3 组件
9. 「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）
10. 「Vue3系列」Vue3 样式绑定
11. 「Vue3系列」Vue3 事件处理
12. 「vue3系列」Vue3 表单