怎么给网站做友情链接,中级网站开发工程师 试题,安庆做网站哪个公司好,网络规划设计师教程第二版电子版下载这一小节#xff0c;我们介绍一下前端项目开发中#xff0c;HTTP请求会用到的3个工具#xff0c;分别是fetch、axios和js-tool-big-box中的jsonp请求。那么他们都有哪些小区别呢#xff1f;我们一起来看一下。
目录
1 fetch
2 axios
3 js-tool-big-box 的 jsonp 请求
…这一小节我们介绍一下前端项目开发中HTTP请求会用到的3个工具分别是fetch、axios和js-tool-big-box中的jsonp请求。那么他们都有哪些小区别呢我们一起来看一下。
目录
1 fetch
2 axios
3 js-tool-big-box 的 jsonp 请求
3.1 安装js-tool-big-box工具库
3.2 导入使用 1 fetch 浏览器内置无需额外安装 fetch是现代浏览器内置的API不需要额外的库或依赖对于一些简单的项目或者不希望增加打包体积的项目fetch是一个轻量级的选择。 简单请求 如果你的请求逻辑比较简单不需要复杂的配置或处理比如简单的GET请求和POST请求fetch足够满足需求。 现代浏览器环境 由于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 复杂的请求需求 axios提供了更多功能和配置选项例如请求和响应拦截器、取消请求、自动转换JSON数据、处理并发请求等。如果你的项目中需要处理这些复杂的需求axios是更好的选择。 兼容性需求 axios支持更多的浏览器包括一些旧版浏览器如果你的项目需要兼容更多类型的浏览器axios可能更合适。 更好的错误处理 axios在处理HTTP错误状态码如404500等时比fetch更方便因为fetch即使在返回404或500状态码时也不会被标记为reject仍需要手动检查响应的状态码。 更好的请求配置和默认设置 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);
});
