JavaScript专项算法题(6):Promises

简介: Promises期约挑战1问题:让我们从复习异步函数开始吧!使用setTimeout,在1000ms后打印字符串“Hello!”。题解:123456789// Challenge 1function sayHello() { // ADD CODE HERE setTimeout(() => console.log('Hello!'), 1000)}// Uncomment the line below when readysayHello(); // should log "Hello" after 1000ms挑战2问题:创建一

Promises期约

挑战1

问题:

让我们从复习异步函数开始吧!使用setTimeout,在1000ms后打印字符串“Hello!”。

题解:

1
2
3
4
5
6
7
8
9
// Challenge 1
functionsayHello() {
// ADD CODE HERE
  setTimeout(() =>console.log('Hello!'), 1000)
}
// Uncomment the line below when ready
sayHello(); // should log "Hello" after 1000ms

挑战2

问题:

创建一个promise。延迟1000ms后在resolve里面传入值“Resolved!”,使用setTimeout。在promise被调用resolve后,打印它的内容,借助传入console.log到.then中来实现。

题解:

1
2
3
4
5
6
7
8
9
// Challenge 2
var promise = newPromise(function (resolve, reject) {
// ADD CODE HERE
  setTimeout(() => resolve('Resolved'), 1000)
});
// Should print out "Resolved!"
// ADD CODE HERE
promise.then(res =>console.log(res))

挑战3

问题:

创建另外一个promise。这次不使用setTimeout,在reject里面传入值“Rejected!”。在promise被调用reject之后,打印它的内容,借助传入console.log到.catch来实现。

题解:

1
2
3
4
5
6
7
8
9
10
// Challenge 3
promise = newPromise(function(resolve, reject) {
// ADD CODE HERE
  reject('Rejected')
})
// Should print out "Reject!"
// ADD CODE HERE
promise.catch(res =>console.log(res))

挑战4

问题:

Promises期约是异步的。现在让我们来证明它们确实如此!创建一个promise,在resolve里面传入值“Promise has been resolved!”,然后去掉挑战4底部的注释。运行后我们看到的打印顺序是怎样的?“Promise has been resolved!”先还是”I’m not the promise!”先?为什么?

题解:

1
2
3
4
5
6
7
8
9
10
// Challenge 4
promise = newPromise(function (resolve, reject) {
// ADD CODE HERE
  resolve()
});
// Uncomment the lines below when ready
promise.then(() =>console.log('Promise has been resolved!'));
console.log("I'm not the promise!");

挑战5

问题:

编写delay函数,用于返回一个promise。此返回promise应该返回一个在1000ms后调用resolve的setTimeout。

题解:

1
2
3
4
5
6
7
8
9


// Challenge 5
functiondelay(){
returnnewPromise(function (resolve, reject) {
return setTimeout(resolve, 1000)
  })
}
// Uncomment the code below to test
// This code should log "Hello" after 1000ms
delay().then(sayHello);

挑战6

问题:

在这个挑战中我们会使用.then链式调用promises期约。创建两个变量:firstPromise和secondPromise,让secondPromise成为一个在resolve中传值“Second!”的promise,firstPromise则在resolve中传入secondPromise。用.then的方式调用firstPromise,这会返回secondPromise,然后在它的resolve执行之后,打印对应promise的内容,借助传入console.log到.then来实现。

题解:

1
2
3
4
5
6
7
8
// Challenge 6
//
// ADD CODE BELOW
var secondPromise = Promise.resolve('Second!')
var firstPromise = newPromise(function (resolve, reject) {
  resolve(secondPromise)
})
firstPromise.then().then(res =>console.log(res))

挑战7

问题:

我们有一个会从数据库拉取数据的API,它接收一个下标参数然后返回一个promise。你的挑战是使用promise.all发起3次API调用,然后在调用都结束后返回对应的数据。

题解:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Challenge 7
const fakePeople = [
  { name: 'Rudolph', hasPets: false, currentTemp: 98.6 },
  { name: 'Zebulon', hasPets: true, currentTemp: 22.6 },
  { name: 'Harold', hasPets: true, currentTemp: 98.3 },
]
const fakeAPICall = (i) => {
const returnTime = Math.floor(Math.random() * 1000);
returnnewPromise((resolve, reject) => {
if (i >= 0 && i < fakePeople.length) {
      setTimeout(() => resolve(fakePeople[i]), returnTime);
    } else {
      reject({ message: "index out of range" });
    }
  });
};
functiongetAllData() {
// CODE GOES HERE
returnPromise.all([fakeAPICall(0), fakeAPICall(1), fakeAPICall(2)])
}
getAllData().then(res =>console.log(res))
相关文章
|
29天前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
2月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
77 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
4月前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
4月前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
4月前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
80 1
|
5月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
140 1
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
5月前
|
算法 JavaScript
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
80 0
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
|
5月前
|
算法 JavaScript
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
53 0
|
5月前
|
算法 JavaScript
JS 【算法】二分查找
JS 【算法】二分查找
40 0
|
5月前
|
缓存 算法 前端开发
前端 JS 经典:LRU 缓存算法
前端 JS 经典:LRU 缓存算法
101 0