文章目录
代码实现解析splittoStringrandomfloorMathrejectresolvePromisethenawaitasync代码实现
async function circularRequest() {let urlList = [{id: 'id1', userId: 'userId9914', url: '/index' },{id: 'id2', userId: 'userId1386', url: '/type' },{id: 'id3', userId: 'userId1850', url: '/about' }],arr = [];for (let i = 0; i < urlList.length; i++) {await getJurisdiction(urlList[i]).then((result) => {let {code, data } = result;if (code === 200) arr.push({...data });});}console.log("arr: ", arr);// arr: (3) [{…}, {…}, {…}]}// 模拟后端返回数据function getJurisdiction(params) {return new Promise((resolve, reject) => {let data = {code: 200,message: "操作成功",data: null,};if (params.userId) {data.data = {id: `id${Math.floor(Math.random() * 10000) + 1}`,userId: params.userId,str: Math.random().toString().split(".")[1],value: Math.floor(Math.random() * 100000) + 1};return resolve(data);} else {data.code = 500;data.message = "操作失败";data.data = null;return reject(data);}});}circularRequest();
解析
使用
Promise
的then
方法配合async
/await
的方式实现。一般情况下请求接口都会使用到Promise
,所以使用await
来截获then
使for
循环能保持等待的效果。
split
w3school
split()
方法将字符串拆分为子字符串数组。
split()
方法返回新数组,不会更改原始字符串。如果
(" ")
用作分隔符,则字符串在单词之间进行拆分。
MDN String.prototype.split()
split()
方法接受一个模式,通过搜索模式将字符串分割成一个有序的子串列表,将这些子串放入一个数组,并返回该数组。
MDN Array.prototype.splice()
splice()
方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。要创建一个删除和/或替换部分内容而不改变原数组的新数组,请使用toSpliced()。要访问数组的一部分而不修改它,参见slice()。
toString
w3school
toString()
方法将对象作为字符串返回。如果
toString()
方法不能返回字符串,则返回"[object Object]"
。
Object.toString()
总是返回对象构造函数。
toString()
方法不会更改原始对象。每个
JavaScript
对象都有toString()
方法。当需要将对象显示为文本(如在
HTML
中)或需要将对象用作字符串时,JavaScript
在内部使用toString()
方法。通常,您不会在自己的代码中使用它。
MDN
toString()
方法返回一个表示该对象的字符串。该方法旨在重写(自定义)派生类对象的类型转换的逻辑。
random
MDN
Math.random()
函数返回一个浮点数,伪随机数在范围从0
到小于1
,也就是说,从0
(包括0
)往上,但是不包括1
(排除1
),然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
w3school
random()
方法返回从0
(含)到1
(不含)的随机数。
floor
MDN
Math.floor()
函数总是返回小于等于一个给定数字的最大整数。
w3school
floor()
方法将数字向下舍入为最接近的整数,并返回结果。如果传递的参数是整数,则不会舍入该值。
floor()
方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。
Math
MDN
Math
是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math
不是一个函数对象。
Math
用于Number类型。它不支持BigInt。与其他全局对象不同的是,
Math
不是一个构造器。Math
的所有属性与方法都是静态的。引用圆周率的写法是Math.PI
,调用正余弦函数的写法是Math.sin(x)
,x
是要传入的参数。Math
的常量是使用JavaScript
中的全精度浮点数来定义的。
w3school
Math
对象允许执行数学任务。
Math
不是构造函数。Math
的所有属性/方法都可以通过使用Math
作为对象来调用,而无需创建它。
reject
MDN
Promise.reject()
静态方法返回一个已拒绝(rejected
)的Promise
对象,拒绝原因为给定的参数。
resolve
MDN
Promise.resolve(value)
方法返回一个以给定值解析后的Promise对象。如果这个值是一个promise
,那么将返回这个promise
;如果这个值是thenable
(即带有then方法),返回的promise
会“跟随”这个thenable
的对象,采用它的最终状态;否则返回的promise
将以此值完成。此函数将类promise
对象的多层嵌套展平。不要在解析为自身的
thenable
上调用Promise.resolve
。这将导致无限递归,因为它试图展平无限嵌套的promise
。一个例子是将它与Angular
中的异步管道一起使用。在此处了解更多信息。
Promise
MDN
Promise
对象用于表示一个异步操作的最终完成(或失败)及其结果值。一个
Promise
对象代表一个在这个promise
被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值。异步方法并不会立即返回最终的值,而是会返回一个promise
,以便在未来某个时候把值交给使用者。一个
Promise
必然处于以下几种状态之一待定(
pending
):初始状态,既没有被兑现,也没有被拒绝。已兑现(
fulfilled
):意味着操作成功完成。已拒绝(
rejected
):意味着操作失败。待定状态的
Promise
对象要么会通过一个值被兑现,要么会通过一个原因(错误)被拒绝。当这些情况之一发生时,我们用promise
的then
方法排列起来的相关处理程序就会被调用。如果promise
在一个相应的处理程序被绑定时就已经被兑现或被拒绝了,那么这个处理程序也同样会被调用,因此在完成异步操作和绑定处理方法之间不存在竞态条件。因为Promise.prototype.then和Promise.prototype.catch方法返回的是
promise
,所以它们可以被链式调用。
then
MDN
then()
方法返回一个Promise (en-US)。它最多需要有两个参数,Promise
的成功和失败情况的回调函数。
await
MDN
await
操作符用于等待一个Promise兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。
async
w3school
函数前的关键字
async
使函数返回promise
MDN
async
函数是使用async关键字声明的函数。async
函数是AsyncFunction构造函数的实例,并且其中允许使用await
关键字。async
和await
关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise
。
async
函数还可以被作为表达式来定义。