话不多说,先上一段代码:
了解一下 async,await 基本语法
async函数内部return语句返回的值,会成为then方法回调函数的参数
async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态,
抛出的错误对象会被catch方法回调函数接收到
function getData(){ return "syy"; } console.log(getData()); //syy async function getData2(){ return "syy2"; } console.log(getData2()); // Promise { resolved } // getData2().then(data =>{console.log(data)}); //syy2
interface TEST_TYPE{ name:string, age:number } let testA = <TEST_TYPE>{ name:"henry", age:666 } function changeA(testA:TEST_TYPE) { testA.age = 777; // throw new Error("changeA new a error"); return testA;////特别注意返回的数据,我们在外部 then里面捕获...包括异常 } async function testAsync(testA:TEST_TYPE) { // throw new Error("testAsync new a error.") let testB = await changeA(testA); // testB.age = 333; testB.name = "明天要交作业"; return testB; // return testA ; } const result1 = testAsync(testA); result1 .then( retValue=>{ console.log(retValue); console.log(retValue.name); console.log(retValue.age);}, reject=>{ console.log("reject. It must be some error happen"); console.log(reject); } ).catch(err=>{ console.log("catch some error."); console.log(err); });
在来个例子,来理解一下 程序是如何运行的
async function sleep(interval:number){ return new Promise(resolve=>{ setTimeout(resolve,interval); }) .then(resolve2=>{console.log("finish resolve2.")}, reject2=>{console.log("reject2")}); } async function one2XInAsync(interval:number=100){ for(let i=1;i<=interval;i++){ console.log("one2FiveInAsync:-----------" + i); if(i==3) { throw new Error("i==3 break"); } await sleep(2000); } } one2XInAsync(20) .then(resolve3=>{ console.log("resolve3"); console.log(resolve3); }, reject3=>{ console.log("reject3"); console.error(reject3); });
继续贴一段代码
let testNum = 1+1; function takeLongTime(){ return new Promise(resolve =>{ setTimeout( ()=>{ resolve("Hello world"); }, 4000); }); } async function test1(){ let t1 = await takeLongTime(); console.log(testNum); console.log(t1); } test1();
单一的 Promise 链并不能发现 async/await 的优势,但是,如果需要处理由多个 Promise 组成的 then 链的时候,优势就能体现出来了(很有意思,Promise 通过 then 链来解决多层回调的问题,现在又用 async/await 来进一步优化它)。
假设一个业务,分多个步骤完成,每个步骤都是异步的,而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作:
function takeLongTime(n:number){ return new Promise(resolve=>{ setTimeout(()=>resolve(n+1000),n); }); } function step1(n:number){ console.log(`step1 with ${n}`); return takeLongTime(n); } function step2(n:number){ console.log(`step2 with ${n}`); return takeLongTime(n); } function step3(n:number){ console.log(`step3 with ${n}`); return takeLongTime(n); } /**采用Promise方式实现 */ function doIt1() { console.time("doIt1"); const time1 = 300; step1(time1) .then(time2 => step2(<number>time2)) .then(time3 => step3(<number>time3)) .then(result => { console.log(`result is ${result}`); console.timeEnd("doIt"); }); } doIt1(); // step1 with 300 // step2 with 1300 // step3 with 2300 // result is 3300 // doIt: 3908.552001953125ms // doIt: 3908.640ms async function doIt2(){ console.time("doIt2"); const time1 = 400; const time2 = await step1(time1); const time3 = await step2(<number>time2); const result = await step3(<number>time3); console.log(`result is ${result}`); console.timeEnd("doIt2"); } doIt2(); // step1 with 400 // step2 with 1400 // step3 with 2400 // result is 3400 // doIt2: 4211.223876953125ms // doIt2: 4212.416ms