首页 > 编程语言 >javascript 学习笔记3

javascript 学习笔记3

时间:2023-04-01 12:04:13浏览次数:53  
标签:异步 const javascript init 笔记 学习 json Promise response

和let一样,通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用。

回调函数曾经是 JavaScript 中实现异步函数的主要方式。

=>的使用:
function doStep1(init, callback) {
  const result = init + 1;
  callback(result);
}
function doStep2(init, callback) {
  const result = init + 2;
  callback(result);
}
function doStep3(init, callback) {
  const result = init + 3;
  callback(result);
}
function doOperation() {
  doStep1(0, result1 => {
    doStep2(result1, result2 => {
      doStep3(result2, result3 => {
        console.log(`结果:${result3}`);
      });
    });
  });
}
doOperation();
fetch() API,一个现代的、基于 Promise 的、用于替代 XMLHttpRequest 的方法


const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

fetchPromise
  .then( response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`); // 抛出异常
    }
    return response.json(); // json() 也是异步的
  })
  .then( json => {
    console.log(json[0].name);
  });



将处理程序传递到Promise 对象的 then() 方法中, Promise 对象还提供了一个 catch() 方法来支持错误处理。这很像 then()。
当异步操作成功时,传递给 then() 的处理函数被调用,而当异步操作失败时,传递给 catch() 的处理函数被调用。
如果将 catch() 添加到 Promise 链的末尾,它就可以在任何异步函数失败时被调用。

有时你需要所有的 Promise 都得到实现,但它们并不相互依赖。在这种情况下,将它们一起启动然后在它们全部被兑现后得到通知会更有效率。这里需要 Promise.all() 方法。它接收一个 Promise 数组,并返回一个单一的 Promise。

由Promise.all()返回的 Promise:
当且仅当数组中所有的 Promise 都被兑现时,才会通知 then() 处理函数并提供一个包含所有响应的数组,数组中响应的顺序与被传入 all() 的 Promise 的顺序相同。
会被拒绝——如果数组中有任何一个 Promise 被拒绝。此时,catch() 处理函数被调用,并提供被拒绝的 Promise 所抛出的错误。

const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( responses => {
    for (const response of responses) {
      console.log(`${response.url}:${response.status}`);
    }
  })
  .catch( error => {
    console.error(`获取失败:${error}`)
  });

有时,你可能需要等待一组 Promise 中的某一个 Promise 的执行,而不关心是哪一个。在这种情况下,你需要 Promise.any()。这就像 Promise.all(),
不过在 Promise 数组中的任何一个被兑现时它就会被兑现,如果所有的 Promise 都被拒绝,它也会被拒绝。

Promise的具体使用方法详见:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

在一个函数的开头添加 async,就可以使其成为一个异步函数。在异步函数中,你可以在调用一个返回 Promise 的函数之前使用 await 关键字。

 

resolve
reject,如果异步函数成功了,就调用 resolve,如果失败了,就调用 reject
resolve
reject

 

标签:异步,const,javascript,init,笔记,学习,json,Promise,response
From: https://blog.51cto.com/u_12890843/6163455

相关文章

  • 《Mysql基础》【Mysql表的基本操作 新建表、修改表、删除表、外键约束、主键约束、完
     --mysql数据库程序设计笔记:表基本操作:1、新建表:格式如:1)、建表加主键:createtable表名(idintNOTNULLauto_incrementcomment'自增主键id',列名类型(范围)comment'列备注',...primarykey(id))engine=InnoDB;2)、建表加候选键副键约束createtable表名......
  • 《Mysql基础》【Mysql删除数据库、新建数据库、修改数据库】 编程入门 学习分享 【公
     --mysql数据库程序设计笔记:数据定义:1、创建数据库:如:createdatabasedb_pro_1defaultcharsetgb2312collategb2312_chinese_ci;QueryOK,1rowaffected(0.00sec)或:createdatabasedb_pro_2defaultcharactersetgb2312defaultcollategb2312_chinese_ci;......
  • 鸿蒙开发学习笔记-UIAbility-Router页面跳转接口源码分析
    在鸿蒙开发中,UIAbility的跳转使用router方法.在使用的时候需导入importrouterfrom'@ohos.router';该方法接口成员如下:1.interfaceRouterOptionsinterfaceRouterOptions{url:string;//跳转页面的Urlparams?:Object;//传给跳转页面的参数params......
  • 《Mysql基础》【Mysql函数 mysql数据类型】 编程入门 学习分享 【公开免费】
    -- --mysql数据库程序设计笔记:gb2312是国标,中国字库。一个汉字2个字节。utf8国际通用标准。包含gb2312;外键只能引用主键和候选键。外键只可以在InnoDB中使用。字段约束:字段类型后可加:check(多个列判断条件)列为:column用col1、col2....代替一、mysql函数:聚合函数:1、......
  • [JSP] 笔记
    JSPjavaserverpagesjava服务端页面jsp=java+html为什么用JSP?JSP为动态页面而生,当页面需要展示动态的数据时,我们不可能像下图这样用servlet中的write写整个页面。那样太过繁琐和复杂。JSP的作用:简化开发,避免用Servlet输出HTML标签。JSP原理JSP本质上......
  • 迁移学习(CDA)《CDA:Contrastive-adversarial Domain Adaptation 》
    论文信息论文标题:CDA:Contrastive-adversarialDomainAdaptation论文作者:NishantYadav,M.Alam,AhmedK.Farahat,DipanjanGhosh,ChetanGupta,A.Ganguly论文来源:2023 ArXiv论文地址:download 论文代码:download视屏讲解:click1介绍基于域对齐的域适应方法实现了......
  • 《Mysql基础》【Mysql添加外键(新增外键)、mysql添加主键、mysql删除外键】 编程入门 学
    --mysql数据库程序设计笔记:--新建表:foreignkey加外键举例:createdatabasedb_test_1defaultcharactersetgb2312defaultcollategb2312_chinese_ci;usedb_test_1;createtablea(idintnotnullauto_incrementcomment'id自增',ainfovarchar(255),primarykey......
  • JavaScript
    大致路径学习JavaScript的路径可以大致分为以下几个方向:HTML和CSS:在学习JavaScript之前,您需要先掌握HTML和CSS基础知识,这是构建网页的基础。JavaScript基础:学习JavaScript的基本语法、变量和数据类型、运算符、条件语句、循环语句等。DOM编程:学习如何通过Ja......
  • 《Mysql基础》【Mysql小数浮点数】double float decimal数据类型 编程入门 学习分享
    -- --mysql数据库程序设计笔记:-------------小数测试--------------------double浮点小数(最多小数位后15位,)使用8个字节存储。--float单精度小数:(最多小数位后6位)使用4个字节存储。--举例保留2位:float(18,2),或:double(20,2)--decimal(最多小数位后30位)(存储空间更优,更小,......
  • [Response对象] 笔记
    response用来设置响应数据响应数据结构响应行HTTP/1.1200OK响应头Content-Type:text/html响应体<h1>HelloWorld!</h1>重定向(Redirect)一种资源跳转方式//重定向//1.设置响应状态码response.setStatus(302);//2.设置响应头response.setHeader("Lo......