js网络请求---fetch和XMLHttpRequest的用法

server/2024/9/22 19:28:37/

fetch

语法规则

javascript">let promise = fetch(url, [options])
//url —— 字符串:要访问的 URL。
//options —— 对象:可选参数:method,header 等。

        fetch函数返回一个promise,若存在网络问题,或网址不存在,那么 promise 就会 reject。异常的 HTTP 状态,例如 404 或 500,不会导致出现 error。

对于promise和aysnc-await可以参考

aysnc-await的用法-CSDN博客

js语法---简单理解promise-CSDN博客

请求实例

javascript">// 请求地址
let url = "https://api.github.com";
// 请求格式
let option = {'method' : "get",'Content-Type': 'application/json;charset=utf-8'
};// async匿名函数
(async()=>{let response = await fetch(url,option);// 待执行的promiseif(response.ok){let data = await response.json(); // 执行完的结果console.log(data,response.status);// response.status请求状态码200-299// 以上response,fetch()的返回值,response.json()的返回值都是promise,data为访问url返回的值(promise的结果)}else{console.log("请求失败!",response.status);}// status —— HTTP 状态码,例如 200。// ok —— 布尔值,如果 HTTP 状态码为 200-299,则为 true。
})()

 response 的属性中看到 HTTP 状态:

  • status —— HTTP 状态码,例如 200。
  • ok —— 布尔值,如果 HTTP 状态码为 200-299,则为 true

请求结果

可以看到控制台和浏览器对应的返回数据

XMLHttpRequest

语法规则

javascript">// 导入XMLHttpRequest模块
const request = new XMLHttpRequest();// 1.发起get请求
request.open("get",url);
// 3.处理请求结果
request.onload = ()=>{}
// 2.发送请求
request.send();
// 函数的执行顺序

 实例化一个XMLHttpRequest对象,通过XMLHttpRequest对象发起请求并处理结果

请求实例

javascript">// 导入XMLHttpRequest模块
const request = new XMLHttpRequest();// 请求地址
let url = "https://api.github.com";// 1.发起get请求
request.open("get",url);
// 3.处理请求结果
request.onload = ()=>{// 请求成功if(request.status === 200 && request.readyState === 4){let data = request.response;// 请求的结果格式为api默认格式(通常为json)console.log(data);}
}
// 2.发送请求
request.send();//发送请求后才能拿到结果// request.readyStatus一共有5中状态:// 0 - (未初始化)还没有调用send()方法
// 1 - (载入)已调用send()方法,正在发送请求
// 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
// 3 - (交互)正在解析响应内容
// 4 - (完成)响应内容解析完成,可以在客户端调用了// request.status同HTTP的状态:// 200:请求成功// 400: 内部服务器错误// request.onload = function(e){}  请求完成// request.process  请求正在加载// request.onerror  请求失败

注意:这种请求方式只能再浏览器中执行


http://www.ppmy.cn/server/22523.html

相关文章

3DTiles特性与内容解析

一篇19年整理的比较老的笔记了。更多精彩内容尽在数字孪生平台。 瓦片种类 3DTiles瓦片有多种类型: b3dm(Batched 3D Model,批量3D模型) b3dm瓦片存储了多个个体,b3dm中的glb代表的实际对象应该具有相同的种类但是可能数据内容不同。b3dm…

李沐70_bert微调——自学笔记

微调BERT 1.BERT滴哦每一个词元返回抽取了上下文信息的特征向量 2.不同的任务使用不同的特性 句子分类 将cls对应的向量输入到全连接层分类 命名实体识别 1.识别应该词元是不是命名实体,例如人名、机构、位置 2.将非特殊词元放进全连接层分类 问题回答 1.给…

Matlab实现CNN-BiLSTM模型,对一维时序信号进行分类

1、利用Matlab2021b训练CNN-BiLSTM模型,对采集的一维时序信号进行分类二分类或多分类 2、CNN-BiLSTM时序信号多分类执行结果截图 训练进度: 网络分析: 指标变化趋势: 代码下载方式(代码含数据集与模型构建&#xff0…

python 单行注释,多行注释

在Python中有两种方法可以进行注释: 单行注释:使用井号(#)开头,后面的内容都会被当作注释,直到该行结束。 #print("Hello, World!") 多行注释:使用三个单引号( &#…

mysql 开启远程连接

登录到mysql mysql -uroot -p 打开mysql数据库并查询user表 use mysql; select user, host from user;更改需要远程连接数据库为任何ip 可以连接, 并刷新系统权限相关的表 update user set host% where hostlocalhost and userroot; flush privileges;

STM32入门_江协科技_1~2_OB记录的自学笔记_STM32简介

1.综述 1.1. 课程简介 手打代码是加入了实操,增加学习效果; STM最小系统板面包板的硬件平台; 配套0.96寸的显示屏,便于调试; 因为使用面板板,所以如果程序现象不出来也有可能是硬件连接的问题; …

宝塔面板开启Nginx缓存为网站提速

fastcgi_cache介绍 Nginx默认自带的fastcgi_cache模块能把动态页面缓存起来,提高网站速度和降低服务器负载。 当有用户请求相同的页面时,Nginx可以直接返回缓存的页面,而不需要再次访问后端服务器。 这个模块可以通过简单的配置实现,还支持…

TensorFlow轻松入门(二)——小案例:ANN构建一个或运算的模型

或运算: 位与位进行比较,如果有任一个是1,结果为1;两个都为0,结果则为0。 实现步骤 构建Feature与Label数据 创建顺序模型 指定模型的第一层,线性模型 添加一层激活函数 模型编译 模型训练 模型预测…