Vue3(四)-基础入门之 Fetch 与 Axios

作者：问题终结者2024.01.18 10:33浏览量：9

简介：本文将介绍 Vue3 中如何使用 Fetch 和 Axios 进行 HTTP 请求。我们将通过比较这两种方法，以及通过实际例子来演示如何使用它们。

在 Vue3 中，Fetch 和 Axios 是两种常用的 HTTP 请求库。Fetch 是一个现代的、功能丰富的 HTTP 客户端，用于浏览器和 Node.js。Axios 则是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。下面我们将分别介绍这两种方法的使用。
一、Fetch
Fetch 是一个强大的 API，用于发起 HTTP 请求。下面是一个简单的 Fetch 请求示例：

  1. fetch('https://api.example.com/data', {
  2. method: 'GET', // 或者 'POST'
  3. headers: {
  4. 'Content-Type': 'application/json',
  5. },
  6. })
  7. .then(response => response.json())
  8. .then(data => console.log(data))
  9. .catch((error) => console.error('Error:', error));

在上面的例子中，我们使用 Fetch API 发起了一个 GET 请求，并处理了响应。如果请求成功，我们将响应解析为 JSON 并打印到控制台。如果出现错误，我们将错误打印到控制台。
二、Axios
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它具有许多有用的特性，如拦截器、转换请求和响应数据等。下面是一个简单的 Axios 请求示例：

  1. const axios = require('axios');
  2. axios.get('https://api.example.com/data')
  3. .then(response => {
  4. console.log(response.data);
  5. })
  6. .catch((error) => {
  7. console.error('Error:', error);
  8. });

在上面的例子中，我们使用 Axios 发起了一个 GET 请求，并处理了响应。如果请求成功，我们将响应数据打印到控制台。如果出现错误，我们将错误打印到控制台。
需要注意的是，Axios 还有许多其他有用的特性，例如拦截器、转换请求和响应数据等。下面是一个使用 Axios 拦截器的例子：

  1. const axios = require('axios');
  2. axios.interceptors.request.use(function (config) {
  3. // 在发送请求之前做些什么
  4. return config;
  5. }, function (error) {
  6. // 对请求错误做些什么
  7. return Promise.reject(error);
  8. });
  9. axios.get('https://api.example.com/data')
  10. .then(response => {
  11. console.log(response.data);
  12. })
  13. .catch((error) => {
  14. console.error('Error:', error);
  15. });

在上面的例子中，我们使用 Axios 拦截器在发送请求之前进行一些操作。如果请求发生错误，我们返回一个拒绝的 Promise。
总结：Fetch 和 Axios 是两种常用的 HTTP 请求库，都可以在 Vue3 中使用。Fetch 具有现代的 API 和强大的功能，而 Axios 则具有基于 Promise 的 API 和许多有用的特性，如拦截器、转换请求和响应数据等。在实际开发中，我们可以根据需求选择合适的库来发起 HTTP 请求。

最热文章