背景
实际场景中，需要同步执行多次，每次执行需要拿到上次的结果，充当本次的参数；在此基础上，既要满足自动实现，还要实现手动实现上面的效果。
方案
页面写两个button，给其绑定点击事件：
const begin = document.getElementById("begin");const restart = document.getElementById("restart");
实现这么一个方法：
// 利用promise，将传进去的方法在promise里面执行，执行完，将结果返回，再用try catch包裹下，避免报错导致用额面崩掉const handle = (callback) => {return new Promise((resolve, reject) => {try {const res = async () => {return await callback();};// 返回结果resolve(res);} catch (err) {reject(err, "failed");}});};
模拟一个实际场景中的接口请求或异步等待操作
// 这个方法是模拟实际业务中的接口请求的，到时候替换成接口就好了const test1 = (val, delay) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve("等到了", val);}, delay);});};
使用：
let myRes;let myRes2;// 连续执行调用begin.onclick = async function () {console.log("1--前");myRes = await handle(() => test1(11, 3000));console.log("1--后");console.log("12--前");// 单独点击这个方法，就是自动执行了myRes2 = await handle(() => test1(myRes, 5000));console.log("res3", myRes2);console.log("12--后");};// 手动续起来执行，点击完上面的 再点击这个，就相当于手动点击两次，但是效果是拿到了第一次返回的结果才执行这个里面的方法，虽然在点击的时候，上面的begin方法还没执行完，就点击了restart，但是还是实现了顺序同步等待restart.onclick = async function () {console.log("2--前");const res3 = await handle(() => test1(myRes2, 5000));console.log("res3", res3);console.log("2--后");};
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/80500.html
