JavaScript 发送 HTTP 请求: 使用 Fetch 和 Axios

<h2>JavaScript 发送 HTTP 请求: 使用 Fetch 和 Axios</h2>
<p>在 Web 开发中，发送 HTTP 请求是与服务器交互、获取数据和更新内容的基础。JavaScript 提供了多种方式发送 HTTP 请求，包括内置的 <code>fetch()</code> 函数以及第三方库，如 Axios。</p>
<p>本文将向你展示如何使用纯 JavaScript 和 Axios 库发送 HTTP 请求，并提供示例代码，帮助你快速上手。</p>
<h3>使用 Fetch API 发送 HTTP 请求</h3>
<p><code>fetch()</code> 函数是 JavaScript 中用于发送 HTTP 请求的现代、强大的 API。它返回一个 Promise 对象，代表请求的状态和结果。</p>
<p>以下是使用 <code>fetch()</code> 发送 GET 请求的示例：javascriptfetch('https://api.example.com/data')  .then(response =&gt; {    // 检查请求是否成功    if (!response.ok) {      throw new Error('Network response was not ok');    }    // 解析响应数据    return response.json();  })  .then(data =&gt; {    // 处理响应数据    console.log(data);  })  .catch(error =&gt; {    // 处理错误    console.error('There was a problem with the fetch operation:', error);  });</p>
<p>发送 POST 请求：javascriptfetch('https://api.example.com/data', {  method: 'POST',  headers: {    'Content-Type': 'application/json'  },  body: JSON.stringify({    key1: 'value1',    key2: 'value2'  })})  .then(response =&gt; {    // 处理响应    // ...  })  .catch(error =&gt; {    // 处理错误    // ...  });</p>
<h3>使用 Axios 发送 HTTP 请求</h3>
<p>Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了比 <code>fetch()</code> 更简洁的 API，并且具有以下优点：</p>
<ul>
<li>自动转换 JSON 数据- 支持请求和响应拦截器- 内置错误处理</li>
</ul>
<h4>安装 Axios</h4>
<p>使用 npm 或 yarn 安装 Axios：bashnpm install axios</p>
<h4>引入 Axios</h4>
<p>在你的 JavaScript 文件中引入 Axios：javascriptconst axios = require('axios'); // Node.js 环境</p>
<p>或者，在浏览器中使用 CDN：html<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script></p>
<h4>发送 GET 请求javascriptaxios.get('https://api.example.com/data')  .then(response =&gt; {    // 处理响应数据    console.log(response.data);  })  .catch(error =&gt; {    // 处理错误    console.error(error);  });</h4>
<h4>发送 POST 请求javascriptaxios.post('https://api.example.com/data', {    key1: 'value1',    key2: 'value2'  })  .then(response =&gt; {    // 处理响应数据    console.log(response.data);  })  .catch(error =&gt; {    // 处理错误    console.error(error);  });</h4>
<h3>总结</h3>
<p>本文介绍了使用 JavaScript 发送 HTTP 请求的两种常用方法：<code>fetch()</code> 和 Axios。<code>fetch()</code> 是内置 API，功能强大，而 Axios 提供了更简洁的 API 和额外的功能。选择哪种方法取决于你的项目需求和个人偏好。</p>