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 是一个基于 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的区别与联系
区别
- 实现方式:Fetch API 是浏览器原生提供的,而 Axios 是一个第三方库。
- 错误处理:Fetch API 使用
catch()
方法来处理错误,而 Axios 使用.catch()
方法。 - 跨域支持:Fetch API 和 Axios 都支持跨域请求,但是 Axios 提供了更多的默认配置,如全局错误处理、自定义请求头等。
- 兼容性:Fetch API 不支持所有旧版浏览器(如 Internet Explorer),而 Axios 可以通过 polyfill 来兼容旧版本浏览器。
联系
- 异步请求:Fetch API 和 Axios 都使用异步请求,基于 Promise 实现。
- 请求类型:两者都支持 GET、POST、PUT、DELETE 等多种请求类型。
- 插件扩展: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()
方法来捕获并处理请求中的错误。
使用 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()
方法来捕获并处理请求中的错误。
使用 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()
方法来捕获并处理请求中的错误。
使用 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 发送 GET 请求,可以按照以下示例代码操作:
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
示例代码解释
- 使用
axios.get()
方法发起 GET 请求。 - 使用
then()
方法处理响应,输出响应数据。 - 使用
catch()
方法来捕获并处理请求中的错误。
使用 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()
方法来捕获并处理请求中的错误。
使用 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()
方法来捕获并处理请求中的错误。
使用 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 从 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
函数来启动数据获取过程。
在上述示例中,已经通过 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));
通过上述方法,可以有效处理常见的网络请求问题,使得应用程序更加健壮和稳定。
共同学习,写下你的评论
评论加载中...
作者其他优质文章