为了账号安全,请及时绑定邮箱和手机立即绑定

Fetch / Axios项目实战:新手必备教程

概述

本文详细介绍了Fetch与Axios项目实战的相关内容,包括Fetch和Axios的基本介绍、区别与联系,以及如何在项目中使用这两种库发送HTTP请求。此外,文章还通过一个简单的数据展示应用,演示了如何结合使用Fetch和Axios。Fetch / Axios项目实战涵盖了从环境搭建到请求处理的全过程。

Fetch与Axios简介
Fetch API介绍

Fetch API 是现代浏览器提供的一个用于进行网络请求的标准接口。它使用Promise来处理异步操作,使得代码更易于理解和维护。Fetch API 通过 fetch() 方法发起请求。该方法返回一个 Promise,该 Promise 会解析为所请求资源的 Response 对象。

Fetch API 的基本语法如下:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

其中,url 是要请求的资源地址,options 是可选的配置对象,可以包含请求方法、请求头、请求体等信息。

Axios介绍

Axios 是一个基于 Promise 的 HTTP 库,可以在浏览器和 Node.js 中使用。它使得发起网络请求更加简单和方便,能够处理多种请求类型,并支持自定义请求头、超时设置和错误处理等高级功能。

Axios 的基本语法如下:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
Fetch与Axios的区别与联系

区别

  1. 实现方式:Fetch API 是浏览器原生提供的,而 Axios 是一个第三方库。
  2. 错误处理:Fetch API 使用 catch() 方法来处理错误,而 Axios 使用 .catch() 方法。
  3. 跨域支持:Fetch API 和 Axios 都支持跨域请求,但是 Axios 提供了更多的默认配置,如全局错误处理、自定义请求头等。
  4. 兼容性:Fetch API 不支持所有旧版浏览器(如 Internet Explorer),而 Axios 可以通过 polyfill 来兼容旧版本浏览器。

联系

  1. 异步请求:Fetch API 和 Axios 都使用异步请求,基于 Promise 实现。
  2. 请求类型:两者都支持 GET、POST、PUT、DELETE 等多种请求类型。
  3. 插件扩展:Axios 提供了插件扩展功能,可以扩展其功能来适应不同的开发需求。

示例代码说明

Fetch API 示例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios 示例

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
环境搭建与准备工作
创建项目环境

创建一个基于 HTML 和 JavaScript 的项目环境,可以使用任何文本编辑器或 IDE(如 VS Code)。首先,创建一个项目文件夹,然后在其中创建以下文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Display App</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>
</head>
<body>
  <div id="data-container"></div>
</body>
</html>

创建 script.js 文件用于编写 Fetch 和 Axios 的代码:

import axios from 'axios';
安装Axios库

为了使用 Axios,需要在项目中安装 Axios 库。可以通过 npm 或 yarn 来安装 Axios。这里使用 npm 来安装 Axios:

npm install axios

安装完成后,可以在 script.js 文件中引入 Axios:

import axios from 'axios';
使用Fetch发送HTTP请求
发送GET请求

使用 Fetch 发送 GET 请求,可以按照以下示例代码操作:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 fetch() 方法发起 GET 请求。
  • 使用 then() 方法处理响应,将其解析为 JSON 格式。
  • 再次使用 then() 方法来处理解析后的数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送POST请求

使用 Fetch 发送 POST 请求,可以按照以下示例代码操作:

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
};

fetch('https://api.example.com/data', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 fetch() 方法发起 POST 请求,需要传递一个配置对象 options,其中包含请求方法、请求头和请求体。
  • options 中的 body 为 JSON 格式的字符串,需要通过 JSON.stringify() 方法来转换。
  • 使用 then() 方法处理响应,将其解析为 JSON 格式。
  • 再次使用 then() 方法来处理解析后的数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送PUT请求

使用 Fetch 发送 PUT 请求,可以按照以下示例代码操作:

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
};

fetch('https://api.example.com/data', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 fetch() 方法发起 PUT 请求,需要传递一个配置对象 options,其中包含请求方法、请求头和请求体。
  • options 中的 body 为 JSON 格式的字符串,需要通过 JSON.stringify() 方法来转换。
  • 使用 then() 方法处理响应,将其解析为 JSON 格式。
  • 再次使用 then() 方法来处理解析后的数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送DELETE请求

使用 Fetch 发送 DELETE 请求,可以按照以下示例代码操作:

const options = {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/data', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 fetch() 方法发起 DELETE 请求,需要传递一个配置对象 options,其中包含请求方法、请求头。
  • 使用 then() 方法处理响应,将其解析为 JSON 格式。
  • 再次使用 then() 方法来处理解析后的数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
处理错误与异常

处理 Fetch 请求中的错误,可以使用 catch() 方法来捕获异常。例如:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

示例代码解释

  • then() 方法中检查响应是否成功(response.ok 返回布尔值)。
  • 如果响应不成功,则抛出一个新的错误。
  • 使用 catch() 方法来捕获并处理请求中的错误。
使用Axios进行HTTP请求
发送GET请求

使用 Axios 发送 GET 请求,可以按照以下示例代码操作:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 axios.get() 方法发起 GET 请求。
  • 使用 then() 方法处理响应,输出响应数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送POST请求

使用 Axios 发送 POST 请求,可以按照以下示例代码操作:

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 axios.post() 方法发起 POST 请求,第二个参数是请求体。
  • 使用 then() 方法处理响应,输出响应数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送PUT请求

使用 Axios 发送 PUT 请求,可以按照以下示例代码操作:

axios.put('https://api.example.com/data', { key: 'value' })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 axios.put() 方法发起 PUT 请求,第二个参数是请求体。
  • 使用 then() 方法处理响应,输出响应数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
发送DELETE请求

使用 Axios 发送 DELETE 请求,可以按照以下示例代码操作:

axios.delete('https://api.example.com/data', { key: 'value' })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 axios.delete() 方法发起 DELETE 请求,第二个参数是请求体。
  • 使用 then() 方法处理响应,输出响应数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
配置请求头和参数

使用 Axios 配置请求头和参数,可以按照以下示例代码操作:

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  }
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

示例代码解释

  • 使用 axios.post() 方法发起 POST 请求,第二个参数是请求体,第三个参数是配置对象。
  • 配置对象中的 headers 部分可以添加自定义的请求头。
  • 使用 then() 方法处理响应,输出响应数据。
  • 使用 catch() 方法来捕获并处理请求中的错误。
实战项目:Fetch与Axios结合使用
构建一个简单的数据展示应用

构建一个简单的数据展示应用,使用 Fetch 或 Axios 从 API 获取数据并展示。该应用将请求来自公开 API 的数据,并在浏览器中展示。

示例代码

首先,创建一个 HTML 文件 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Display App</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>
</head>
<body>
  <div id="data-container"></div>
</body>
</html>

然后,在 script.js 文件中编写 JS 代码:

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    const data = response.data;
    displayData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const displayData = (data) => {
  const container = document.getElementById('data-container');
  container.innerHTML = `<p>User ID: ${data.userId}</p>
                         <p>ID: ${data.id}</p>
                         <p>Title: ${data.title}</p>
                         <p>Completed: ${data.completed ? 'Yes' : 'No'}</p>`;
};

fetchData();

示例代码解释

  • script.js 中,首先引入 Axios 库。
  • 定义一个 fetchData 函数,使用 axios.get() 方法从 API 获取数据。
  • 使用 try...catch 结构来捕获并处理请求中的错误。
  • 定义一个 displayData 函数,用于将数据展示到页面上。该函数获取 DOM 元素 data-container,并根据获取的数据填充 HTML 标签。
  • 最后调用 fetchData 函数来启动数据获取过程。
使用Fetch或Axios从API获取数据

在上述示例中,已经通过 Axios 从 API 获取数据。如果希望使用 Fetch 替代 Axios,可以将代码改为如下:

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    displayData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

示例代码解释

  • 使用 fetch() 方法从 API 获取数据,该方法返回一个 Promise。
  • 使用 await 关键字等待 Promise 解析,并将响应解析为 JSON 格式。
  • 将解析后的数据传递给 displayData 函数进行展示。
展示获取的数据

展示获取的数据已经在 displayData 函数中实现。该函数将数据中的各个字段填充到 HTML 元素中,如用户 ID、ID、标题等。这样可以在浏览器中看到从 API 获取的数据。

常见问题与解决方案
常见错误及解决方法

网络请求失败

  • 错误描述:请求失败,通常是因为网络连接问题或服务器返回错误。
  • 解决方法
    • 检查网络连接是否正常。
    • 检查请求的 URL 是否正确。
    • 检查服务器是否正常运行。

错误处理机制不完善

  • 错误描述:捕获不到错误,或者错误信息难以理解。
  • 解决方法
    • 使用 try...catch 结构来捕获所有可能的错误。
    • 输出详细的错误信息,例如错误代码、错误消息等。

跨域请求问题

  • 错误描述:在浏览器中发出的请求被限制,无法访问不同源的资源。
  • 解决方法
    • 在服务器端配置 CORS(跨域资源共享),允许特定来源的请求。
    • 使用代理服务器,将请求转发到目标服务器。

具体示例代码

配置请求头和处理跨域请求

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  },
  withCredentials: true
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

处理跨域请求

fetch('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  },
  mode: 'cors',
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

通过上述方法,可以有效处理常见的网络请求问题,使得应用程序更加健壮和稳定。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消