前端项目开发,3个HTTP请求工具

news2024/11/24 3:43:43

这一小节,我们介绍一下前端项目开发中,HTTP请求会用到的3个工具,分别是fetchaxiosjs-tool-big-box中的jsonp请求。那么他们都有哪些小区别呢?我们一起来看一下。

目录

1 fetch

2 axios

3 js-tool-big-box 的 jsonp 请求

3.1 安装js-tool-big-box工具库

3.2 导入使用


1 fetch

  1. 浏览器内置,无需额外安装fetch是现代浏览器内置的API,不需要额外的库或依赖,对于一些简单的项目或者不希望增加打包体积的项目,fetch是一个轻量级的选择。

  2. 简单请求: 如果你的请求逻辑比较简单,不需要复杂的配置或处理,比如简单的GET请求和POST请求,fetch足够满足需求。

  3. 现代浏览器环境: 由于fetch是ES6+时代的API,支持Promise,所以在现代浏览器环境中使用fetch可以获得更简洁的代码。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

2 axios

  1. 复杂的请求需求axios提供了更多功能和配置选项,例如请求和响应拦截器、取消请求、自动转换JSON数据、处理并发请求等。如果你的项目中需要处理这些复杂的需求,axios是更好的选择。

  2. 兼容性需求axios支持更多的浏览器,包括一些旧版浏览器,如果你的项目需要兼容更多类型的浏览器,axios可能更合适。

  3. 更好的错误处理axios在处理HTTP错误状态码(如404,500等)时,比fetch更方便,因为fetch即使在返回404或500状态码时也不会被标记为reject,仍需要手动检查响应的状态码。

  4. 更好的请求配置和默认设置axios允许设置全局默认配置,可以在创建实例时配置baseURL、timeout等选项,简化多次请求时的配置工作。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('There has been a problem with your axios operation:', error));

3 js-tool-big-box 的 jsonp 请求

说到jsonp请求,大家就会想到跨域,如果服务端没有做CROS的跨域设置,而是要通过JSONP跨域请求的方式,那么这个工具库会非常合适。

再下面的示例代码中,我们本站的IP是localhost,端口是8080,请求服务端目标IP为127.0.0.1,端口为3000,正是属于跨域场景.

3.1 安装js-tool-big-box工具库

npm i js-tool-big-box

3.2 导入使用

导入 ajaxBox 对象,因为jsonp方法的宿主是 ajaxBox ,导入后就可以使用了。

import { ajaxBox } from 'js-tool-big-box';

ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){
      console.log('获取到的JSONP请求数据', data);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1714630.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一个月速刷leetcodeHOT100 day13 二叉树结构 以及相关简单题

树是一种分层数据的抽象模型 二叉树 二叉树中的节点最多只能有两个子节点,一个是左侧子节点,另一个是右侧子节点 二叉搜索树 二叉搜索树(BST)是二叉树的一种,但是只允许你在左侧节点存储(比父节点&…

扎气球最高分-第13届蓝桥杯选拔赛Python真题精选

[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第74讲。 扎气球最高分&…

IntelliJ IDEA内置自带Maven的使用注意事项

一、内置自带Maven的位置 IDEA中是有自带Maven的,虽然可能不够个性化,不太好用,但是如果知道怎么设置,还是能自定义一点的。它作为IDEA的自带插件,位置在IDEA所在目录的“\plugins\plugins\maven\lib\maven3\”文件夹中。 二、本地仓库位置 因为Maven主要功能就是统一下…

MoE模型大火,源2.0-M32诠释“三个臭皮匠,顶个诸葛亮”!

文 | 智能相对论 作者 | 陈泊丞 近半年来,MoE混合专家大模型彻底是火了。 在海外,OpenAI的GPT-4、谷歌的Gemini、Mistral AI的Mistral、xAI的Grok-1等主流大模型都采用了MoE架构。而在国内,浪潮信息也刚刚发布了基于MoE架构的“源2.0-M3…

无人机操作界面来了,起点就很高呀。

无人机操作界面设计需要考虑以下几个方面: 易用性:无人机操作界面应该简单直观,易于操作和理解。操作按钮和控键应该布局合理,易于触摸或点击。重要的操作功能应该易于找到和使用,避免用户迷失或困惑。实时反馈&#…

【Uniapp微信小程序】自定义水印相机、微信小程序地点打卡相机

效果图 template 下方的image图片自行寻找替换! <template><view><camerav-if="!tempImagePath && cameraHeight !== 0":resolution="high":frame-size="large":device-position="device":flash="flas…

RAID配置实战

概念 raid磁盘阵列&#xff1a;可以用不同的硬盘分区&#xff0c;组成一个逻辑上的硬盘。具有高可用 raid级别&#xff1a; raid0 &#xff1a;条带化存储&#xff1a;数据分散在多个物理硬盘上的存储方式。利用多个磁盘并行读取和写入。存储性能和读写性能是最好的。没有冗…

朗读亭主要作用有哪些?

朗读亭的主要作用有以下几个方面&#xff1a; 1. 提供朗读服务&#xff1a;朗读亭是一个专门的场所&#xff0c;提供给人们朗读的环境和场地。人们可以在朗读亭中选择自己喜欢的书籍或文章&#xff0c;并通过朗读将其表达出来。这样可以帮助人们提高朗读能力&#xff0c;增强自…

【C语言训练题库】杨辉三角(下三角型和金字塔型)

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 题目&#xff1a;打印杨辉三角 1. 下三角型 1.1 图例: 1.2. 解析: 1.3. 代码: 1.4. 运行&#xff1a; 2. 金字塔型 2.1 图例 2.2. 解析 2.2.1. 打印金…

[猫头虎分享21天微信小程序基础入门教程]第21天:小程序的社交分享与消息推送

[猫头虎分享21天微信小程序基础入门教程]第21天&#xff1a;小程序的社交分享与消息推送 第21天&#xff1a;小程序的社交分享与消息推送 &#x1f4f2; 自我介绍 大家好&#xff0c;我是猫头虎&#xff0c;一名全栈软件工程师。今天我们继续微信小程序的学习&#xff0c;重…

买入看跌期权怎么理解?

今天带你了解买入看跌期权怎么理解&#xff1f;看跌期权买入者往往预期市场价格将下跌。 买入看跌期权怎么理解&#xff1f; 买入看跌期权是指购买者支付权利金&#xff0c;获得以特定价格向期权出售者卖出一定数量的某种特定商品的权利。看跌期权买入者往往预期市场价格将下跌…

基于python实现生命游戏

文章目录 一、生命游戏是什么二、生命游戏规则解释1.相邻细胞2.细胞状态 三、代码实现1.邻居细胞2.更新状态 四、整体代码 一、生命游戏是什么 生命游戏&#xff08;Game of Life&#xff09;是由英国数学家约翰何顿康威在1970年发明的一种细胞自动机&#xff08;Cellular Aut…

备份服务器的安全风险以及如何通过TDE透明加密提升安全性

备份服务器的潜在安全风险主要包括以下几个方面&#xff1a; 1. 数据泄露风险&#xff1a; 备份数据可能包含敏感信息&#xff0c;如用户个人信息、商业机密等。如果备份数据未经适当保护&#xff0c;例如存储在不安全的位置或未加密&#xff0c;黑客或未授权的人员可能会获取…

家政预约小程序08服务详情

目录 1 创建页面2 创建URL参数3 配置数据详情组件4 从分类页跳转到详情页5 搭建详情页总结 现在我们的小程序已经在首页和分类页展示了服务的列表信息&#xff0c;当用户点击具体的内容的时候需要打开详情页&#xff0c;本篇介绍一下详情页的开发。 1 创建页面 打开应用编辑器…

【第7章】SpringBoot整合Mybatis-Plus

文章目录 前言一、引入库二、案例1.UserMapper2.UserController3. 结果 三、配置总结 前言 MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 上一篇内容已经整合过Mybatis&#xff0c;这里在…

拼接字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 使用“”运算符可完成对多个字符串的拼接&#xff0c;“”运算符可以连接多个字符串并产生一个字符串对象。 例如&#xff0c;定义两个字符串&#…

05-28 周二 TTFT, ITL, TGS 计算过程以及LLama2推理代码调试过程

05-28 周二 LLama2推理代码调试过程 时间版本修改人描述2024年5月28日15:03:49V0.1宋全恒新建文档 简介 本文主要用于求解大模型推理过程中的几个指标&#xff1a; 主要是TTFT&#xff0c;ITL&#xff0c; TGS 代码片段 import osdata_dir "/workspace/models/" m…

【2024最新华为OD-C卷试题汇总】披萨大作战 (100分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 前…

从多站点到多活,XEOS 对象数据容灾能力再提升

近日&#xff0c; XSKY SDS V6.4 新版本发布&#xff0c;其中 XEOS V6.4 全新升级并完善了统一命名空间功能&#xff0c;更进一步增强和完善了异地容灾方案&#xff0c;配合强一致代理读&#xff0c;可以实现异地多活&#xff1b;同时大幅降低管理复杂度&#xff0c;有效降低容…

Apache漏洞复现:【CVE-2021-42013】【CVE_2021_41773】【CVE-2017-15715】

声明 严禁读者利用本文介绍知识点对网站进行非法操作 , 本文仅用于技术交流和学习 , 如果您利用文章中介绍的知识对他人造成损失 , 后果由您自行承担 , 如果您不能同意该约定 , 请您务必不要阅读该文章 , 感谢您的配合 ! 远程代码执行 CVE-2021-42013 描述 Apache HTTP Ser…