代码实现

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();

解析

使用Promisethen方法配合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对象要么通过一个值被兑现,要么通过一个原因(错误)被拒绝。当这些情况之一发生时,我们promisethen方法排列起来的相关处理程序就会被调用。如果promise在一个相应的处理程序绑定时就已经被兑现或被拒绝了,那么这个处理程序也同样会被调用,因此在完成异步操作和绑定处理方法之间存在竞态条件
因为Promise.prototype.thenPromise.prototype.catch方法返回的是promise,所以它们可以链式调用


then

MDN

then()方法返回一个Promise (en-US)。它最多需要两个参数Promise的成功和失败情况的回调函数。


await

MDN

await操作符用于等待一个Promise兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。


async

w3school

函数前的关键字async使函数返回promise


MDN

async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数实例,并且其中允许使用await关键字asyncawait关键字我们可以用一种更简洁方式写出基于Promise异步行为,而无需刻意地链式调用promise
async函数还可以作为表达式定义

原文地址:https://blog.csdn.net/weixin_51157081/article/details/125209253

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_35152.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注