Promise API, async and await

1. Promise.resolve:把一个value值包装成promise返回

let p=Promise.resolve(2) equals to let p=new Promise((resolve)=>{resolve(2)});
example:

var loadCache;
function loadUrl(url){
  var cache=loadCache.cache || ( loadCache.cache=new Map() );
  if(cache.has(url)) return Promise.resolve( cache.get(url) );
  return fetch(url)
  .then( response=>response.json() )
  .then( text=>{
    cache.set(url,text);
    return text;
  }
}

Promise.resolve保证了这个函数的返回结果在两种情况下都会是 promise对象,保证了接口的统一性。

2. Promise.all: 返回promise对象,输入参数为数组,数组中的元素为promise

let p=Promise.all([...promise...]);
simple example:

Promise.all([
  new Promise(resolve => setTimeout(resolve(1),1000) ),
  new Promise(resolve => setTimeout(resolve(2),2000) ),
])
.then(console.log);
//output: [1,2]

我们来看看Promise.all的一些应用实例

  • example 1: 在这里例子中,Promise.all会等到request数组中的3个promiseresolved之后,然后自己resolve,去执行.then()中的部分。
let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://api.github.com/users/jeresig'
];

// 将每个 url 映射到 fetch 的 promise 中
let requests = urls.map(url => fetch(url));

// Promise.all 等待所有作业都被 resolve
Promise.all(requests)
  .then(responses => responses.forEach(
    response => alert(`${response.url}: ${response.status}`)
  ));
  • example 2: 在example 1的基础上,我们进一步利用 promise的链式调用。
let names = ['iliakan', 'remy', 'jeresig'];

let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));

Promise.all(requests)
  .then(responses => {
    // 所有响应都就绪时,我们可以显示 HTTP 状态码
    for(let response of responses) {
      alert(`${response.url}: ${response.status}`); // 每个 url 都显示 200
    }

    return responses;
  })
  // 映射 response 数组到 response.json() 中以读取它们的内容
  .then(responses => Promise.all(responses.map(r => r.json())))
  // 所有 JSON 结果都被解析:“users” 是它们的数组
  .then(users => users.forEach(user => alert(user.name)));

Promise.all其他的一些要点:

  1. 如果传给输入参数数组的不是promise,是一个值,那么Promise.resolve会将其包装成一个resolved promise
  2. 如果其中的一个promisereject状态,Promise.all会等待其他promise的执行结果,但是最后的返回结果是rejected promise

3. Promise.allSettled:对Promise.all的信息补充

简单来说,这个函数是把数组中的每个resolved value包装成一个object, 根据数组中每个返回的promise的状态将其包装成{status: 'fulfilled', value: resolved value} or {status: 'rejected', reason: error}

4. Promise.race:只关心第一个完成的promise, 之后的promise都不会被执行。

5. Promise.reject:与Promise.resolve相似

6. Promisification

Promisification非常有意思,一般回调函数的形式大多为func(para1,para2,...,callback)promisify的过程为:

function(para1,para2,...,paraM){
  return new Promise( (resolve,reject)=>{
    func1(para1,para2,...,paraM, (error, result)=>{
        if(error) reject( new Error('whoops'));
        else resolve(result);
      }
    } 
  );
}
//我们把这一过程继续包装:
function promisify(f){
  return function(...args){
    return new Promise((resolve,reject)=>{
      function callback(error,result){
        if(error) reject(new Error('whoops');
        else resolve(result);
        }
      args.push(callback);
      f.apply(this,...args);
    });
 }
}
//如果callback的参数不止两个
function promisify(f,manyArgs=false){
  return function(...args){
    return new Promise((resolve,reject)=>{
      function callback(error,...result){
        if(error) reject(new Error('whoops');
        else resolve(manyArgs ? result : result[0]);
        }
      args.push(callback);
      f.apply(this,...args);
    });
 }
}

我们在promise中定义回调函数,在其中我们根据error参数的有无来决定promise的状态,然后将回调函数push到函数的arguments中,执行我们想要包装的函数。
这样改写之后,原先放在callback中的操作也会放入.then()函数中,符合promise的正常代码逻辑。

7. async, await

首先我们要记住一条,就是await只能在async函数里面使用,如果在顶层代码中使用会报错。

  • async保证函数的返回值会被包装成一个promise
  • await保证只有当前的promise ready之后才会执行后续的代码,是更优雅地改写promise.then().then()链式调用的语法。
    我们来看一个例子:
async function showAvatar(){
  let response = await fetch('/profiles/user.json');
  let user = await response.json();
  let githubResponse = await fetch(`https://www.github.com/user?${user.name}`);
  let githubUser = await githubResponse.json();
  let img = document.createElement('img');
  img.src=githubUser.avatar_url;
  document.body.append(img);
  await new Promise(resolve=>setTimeout(resolve,3000)); //(*)
  img.remove();
  return githubUser;
}

(*)处的await保证了图片会在页面中保留3s
await handling error:

(async function(){
  let result=await Promise.reject('whoops');
})().catch(console.log);
//'whoops'
//equals to:
(async function(){
      try{
        let result=await Promise.reject('whoops');
      }catch(e){
          console.log(e);
      }
  })();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,706评论 1 56
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 824评论 0 2
  • 一. Callback (回调函数) 1.定义:把函数当作变量传到另一个函数里,传进去之后执行甚至返回等待之后的...
    hutn阅读 1,528评论 0 2
  • //本文内容起初摘抄于 阮一峰 作者的译文,用于记录和学习,建议观者移步于原文 概念: 所谓的Promise,...
    曾经过往阅读 1,238评论 0 7
  • 思维导图—让大脑起航 优师优课...
    qdliuyao阅读 131评论 0 0