88520191 2020-01-30
async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
简单理解:
async 是让方法变成异步。
在终端里用 node 执行这段代码,你会发现输出了 Promise {‘Hello async’ },这时候会发现它返回的是 Promise。
async function testAsync(){ return ‘Hello async‘; } const result = testAsync(); console.log(result);
await 是等待异步方法执行完成。
其实 await 等待的只是一个表达式,这个表达式在官方 文档里说的是 Promise 对象,但是它也可以接受普通值。 注意:await 必须在 async 方法中 才可以使用因为 await 访问本身就会造成程序停止堵塞,所以必须在异步方法中才可以使用。
function getData(){ return ‘zhangsan‘; } async function testAsync(){ return ‘Hello async‘; } async function test(){ const v1=await getData(); const v2=await testAsync(); console.log(v1,v2); } test();
async/await 同时使用
async 会将其后的函数(函数表达式或 Lambda)的返回值封装成一个 Promise 对象,而 await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来。
function findData() { return new Promise(resolve => { setTimeout(() => resolve("long_time_value"), 1000); }); } async function test() { const v = await findData(); console.log(v); } test();
案例:
/*和var是一样的 let a=123; * */ /* 是一个块作用域 if(true){ let a=123; } console.log(a); * */ /*常量 const PI=3.14159; PI=3; console.log(PI); */ /*模板字符串 var name=‘张三‘; var age=20; console.log(name+‘的年龄是‘+age); var name=‘张三‘; var age=20; console.log(`${name}的年龄是${age}`); */ /*方法的简写 属性的简写 var name=‘zhangsan‘; var app={ name:name } console.log(app.name); 属性的简写 var name=‘zhangsan‘; var app={ name } console.log(app.name); 方法的简写 var name=‘zhangsan‘; var app={ name, run(){ console.log(`${this.name}在跑步`); } } app.run(); */ /* 箭头函数 this指向上下文 setTimeout(function (){ console.log(‘执行‘); },1000) setTimeout(()=>{ console.log(‘执行‘); },1000) * */ /*回调函数 获取异步方法里面的数据 function getData(callbck){ //ajax setTimeout(function(){ var name=‘张三‘; callbck(name); },1000); } //外部获取异步方法里面的数据 getData(function(data){ console.log(data+‘111‘); }) * */ /*Promise来处理异步 resolve 成功的回调韩红素 reject失败的回调函数 var p=new Promise(function(resolve,reject){ //ajax setTimeout(function(){ var name=‘张三‘; if(Math.random()<0.7){ resolve(name); }else{ reject(‘失败‘); } },1000); }) p.then((data)=>{ console.log(data); }) * */ function getData(resolve,reject){ //ajax setTimeout(function(){ var name=‘张三‘; resolve(name); },1000); } var p=new Promise(getData); p.then((data)=>{ console.log(data); })
//async 是让方法变成异步 /* 普通方法 function getData(){ return ‘这是一个数据‘; } console.log(getData()); //这是一个数据 * */ /* async 是让方法变成异步 async function getData(){ return ‘这是一个数据‘; } console.log(getData()); //Promise { ‘这是一个数据‘ } * */ /*如何获取async 异步方法里面的数据的第一种方法 async function getData(){ return ‘这是一个数据‘; } var p=getData(); p.then((data)=>{ console.log(data); }) * */ //await 是等待异步方法执行完成,可以获取异步方法里面的数据,但是必须得用在异步方法里面 /*await 错误的用法 async function getData(){ return ‘这是一个数据‘; } var d=await getData(); console.log(d); //await is only valid in async function * */ //await 是等待异步方法执行完成,可以获取异步方法里面的数据,但是必须得用在异步方法里面 /* async function getData(){ return ‘这是一个数据‘; } async function test(){ var d=await getData(); console.log(d); } test(); * */ //await 阻塞的功能 ,把异步改成一个同步 //async function getData(){ // console.log(2); // return ‘这是一个数据‘; //} //async function test(){ // // console.log(1); // var d=await getData(); // console.log(d); // console.log(3); //} //test(); //1 2 3 //async 定义的方法返回的是 Promise对象。 /* function getData(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ var username=‘张三‘; resolve(username); },1000) }) } var p=getData(); p.then(function(d){ console.log(d); }) * */ function getData(){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ var username=‘张三‘; resolve(username); },1000) }) } async function test(){ var data=await getData(); console.log(data); } test();