IT评测·应用市场-qidao123.com

标题: 前端发送请求之fetch跟axios的区别 [打印本页]

作者: 盛世宏图 时间: 2025-1-11 00:07
标题: 前端发送请求之fetch跟axios的区别
        前端开发工程师在针对页面UI筹划稿还原之后，还需要与后端开发工程师进行接口对接，发送请求获取后端接口数据后进行逻辑处理呈现给用户。
        常见的发送请求的方式是：Fecth，Axios
        以下概念来自AI
Fecth与Axios的区别：
API的筹划：
        Fetch API是基于浏览器内置的 window.fetch 函数，利用起来较为简朴，但有些功能需要手动处理，好比对错误的处理。
        Axios 是一个单独的库，提供了更丰富的功能和更方便的API，例如主动处理JSON数据、请求和相应拦截器等。
兼容性：
        Fetch API 在现代浏览器中得到良好支持，但在一些老旧的浏览器中可能需要利用 polyfill 进行兼容处理。
        Axios 兼容性更好，在各种情况中都可以利用，并提供了同等的API。
错误处理：
        在Fetch API中，需要手动检查HTTP相应状态码并处理错误。
        Axios 提供了更简便的错误处理机制，可以通过 .catch 来捕捉错误。
举例阐明：
Fetch API

// 用例一
fetch(url, {
method: 'GET', // 请求方法
headers: {
'Content-Type': 'application/json', // 请求头
// 其他自定义请求头
},
body: JSON.stringify(data), // 请求体，通常用于 POST 或 PUT 请求
})
.then(response => response.json()) // 处理响应数据
.then(data => {
// 处理获取到的数据
})
.catch(error => {
// 处理错误
});
// 用例二
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});

复制代码

Axios

// 用例一
axios({
method: 'GET', // 请求方法
url: 'https://api.example.com/data', // 请求地址
headers: {
'Content-Type': 'application/json', // 请求头
// 其他自定义请求头
},
data: requestData, // 请求体，通常用于 POST 或 PUT 请求
})
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
});
// 用例二
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});

复制代码

Fetch兼容性处理：利用 polyfill 来提供 fetch 的兼容性
利用 polyfill 对 fetch 进行兼容处理的步骤：
1、选择一个 polyfill 库
有许多库提供了 fetch 的 polyfill，例如 github.com/github/fetch。
2、引入 polyfill
在你的项目中，你可以通过 <script> 标签或模块导入的方式来引入这个 polyfill。
例如，利用 <script> 标签：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.2.0/fetch.umd.js"></script>

复制代码

大概利用模块导入（例如，在 Node.js 或现代浏览器中）：

import 'exports-loader?self.fetch!exports-loader?self.Headers!exports-loader?self.Request!exports-loader?self.Response!github:github/fetch';

复制代码

3、利用Fetch
一旦你引入了 polyfill，你就可以在你的代码中利用 fetch 了，而不消担心它是否受支持。

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)