promise的状态以及api介绍_面试题，实现一个Promise.first()

最新推荐文章于 2022-09-12 21:24:01 发布

weixin_39554775

最新推荐文章于 2022-09-12 21:24:01 发布

阅读量212

点赞数

文章标签： promise的状态以及api介绍

// （1.）最短时间内找出（2.）响应速度最快且（3.）成功的接口。
// 实现 findFatest 函数。

const urls = [
    'https://www.toutiao.com/a',
    'https://www.toutiao.com/b',
    'https://www.toutiao.com/bb',
    'https://www.toutiao.com/d',
    'https://www.toutiao.com/e',
]
findFatest(urls).then(url => console.log(url)

最短时间找出相当于限制 ->只能用fetch()，它返回一个promise，防止答题者用setTimeout遍历出ajax 请求包裹上promise来（用回调即一个异步执行完成后在执行下一个请求，这样很不错，但是问题又来了，延迟延迟延迟，请求越多最后的那个请求延迟就会越严重）
同时发送的话相当于限制 -> 用Promise.all() 或 Promise.race()
响应速度最快且（3.）成功的接口 -> 最快或者说第一个就用Promise.race()了，但是Promise.race()在第一个拒绝时候也返回，所以不符合。
那么问题来考的是啥呢？直到我翻开了《你不知道的javascript 中卷》的p217页其实是要实现一个Promise.first([...])

这算是实现一个Promise.all() 和Promise.race()的变体：

要求：只要第一个Promise完成（注意必须是完成，而非拒绝，这也是这题Promise.race()不符合的原因），它就会忽略后续的任何拒绝和完成

总体来看 , first 类似race，但是只要有一个promise决议为完成（忽略前边被拒绝的promise），就忽略后边的promise

我们来把上面的代码补全（加上如果promise都被拒绝了，就在主promise上调用reject（）的逻辑）

测试一下，下面是测试用例

const promisesForFirstTest1= [ // 模拟开始问题的fetch请求urls返回值
    Promise.reject('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
  ]
  Promise.first(promisesForFirstTest1).then(res => {
    debugger // 执行到此，res 为 '2'
  }, res => {
    debugger
  })

  const promisesForFirstTest2= [
    Promise.reject('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
  ]
  Promise.first(promisesForFirstTest2).then(res => {
    debugger 
  }, res => {
    debugger // 执行到此
  })

由此我们还会遇到其他的扩展需求，比如：

Promise.none([...]): 这个模式类似于Promise.all([...])，不过和 Promise.all 相反，当所有的promise被拒绝之后，none方法执行完成的决议，如果存在一个promise执行完成的决议，none方法则执行拒绝
Promise.any([...]): 忽略被拒绝的promise，只需要有一个完成的promise，any方法就执行完成操作，如果全部的promise都被拒绝，any方法执行拒绝操作

并发迭代

基础知识讲解（复习一遍）

fetch

get请求

一个基本的 fetch请求设置起来很简单，这里发起一个get请求。看看下面的代码

（用myjson造个接口）

// 测试接口
fetch('https://api.myjson.com/bins/iyzpa')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

调用fetch函数，传入接口url，然后返回一个promise（response），为了获取JSON的内容，我们需要使用`json()`方法，这个方法返回的也是一个promise。

post请求

发起一个post请求，我们用JSONPlaceholder造个

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        name: "白鲸鱼",
        age: 10000
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

还可以配合serve worker使用 ---> 使用Service Worker和离线缓存Cache

Promise.all()

类方法，多个 Promise 任务同时执行。
如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果。
Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

p1,p2,p3组成一个数组，都是promise实例。

p的状态由p1、p2、p3决定，分成两种情况：
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

上面代码中，Promise.all()内的参数是 2个会返回Promise的接口请求，只有这 2 个请求的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数。

1、如果参数中包含非promise值，这些值将被忽略，但仍然会被放在返回数组中（如果promise完成的话）

下面的例子中演示了`Promise.all` 的异步性（如果传入的可迭代对象是空的，就是同步）：

严格来说.传给 Promise.all([...])的数组的元素可以是Promise, thenable,甚至是立即值。
就本质而言 , 列表中的每个值都会通过Promise.resolve(...)过滤, 以确保等待的是一个真正的Promise，所以立即值会被规范化为这个值构建的Promise。
如果数组是空的，主Promise就会立即完成（另外， Promise.all 当且仅当传入的可迭代对象为空时为同步）

Promise.race()

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

const p = Promise.race([p1, p2, p3]);

The Promise.race(iterable) method returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.
意思是Promise.race会返回参数中第一个执行完毕的promise的结果(无论是已完成还是已拒绝)

Promise.race([...])也接受单个数组参数，这个数组由一个或多个Promise, thenable或立即值组成

立即值之间的竞争在实践中没有多大意义，因为显然列表中的第一个会获胜，就像赛跑中有个选手是从终点开始比赛一样。

注意1：永远要记住为每个promise关联一个拒绝/错误处理函数（catch）

注2：若向Promise.all([...])传入空数组，它会立即完成，但Promise.race([...])会挂住,且永远不会决议

参考

Promise.race 结果(深入理解ES6书籍有误)www.jianshu.com Promise.race()developer.mozilla.org

Promise.all()developer.mozilla.org

《你不知道的js 中卷》

dojo/promise/first - The Dojo Toolkit - Reference Guidedojotoolkit.org 人类身份验证 - SegmentFaultsegmentfault.com 给ES6 Promise 扩展always方法www.jianshu.com

https://github.com/juneidysoo/promise-first/blob/master/index.jsgithub.com Promise.prototype.catch()developer.mozilla.org

frontarm/async-javascript-cheatsheetgithub.com

总结一下ES6/ES7中promise、generator和async/await中的异常捕获方法 · Issue #16 · forthealllight/bloggithub.com

http://weixin.qq.com/r/hElmfgPEdF4LrUcd9xyW (二维码自动识别)

weixin_39554775

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise的状态以及api介绍_面试题，实现一个Promise.first()

// （1.）最短时间内找出（2.）响应速度最快且（3.）成功的接口。最短时间找出相当于限制 ->只能用fetch()，它返回一个promise，防止答题者用setTimeout遍历出ajax 请求包裹上promise来（用回调即一个异步执行完成后在执行下一个请求，这样很不错，但是问题又来了，延迟延迟延迟，请求越多最后的那个请求延迟就会越严重）同时发送的话相当于限制 -> 用Prom...
复制链接

扫一扫