您现在的位置:首页 >> 前端 >> 内容

async await和promise的使用实例分析

时间:2018/5/31 12:00:54 点击:

  核心提示:async 是异步的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。...

async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async

用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。

简单理解:

async 是让方法变成异步。

await 是等待异步方法执行完成。

详细说明:

async 是让方法变成异步,在终端里用 node 执行这段代码,你会发现输出了 Promise {‘Hello

async’ },这时候会发现它返回的是 Promise。

async function testAsync(){

return 'Hello async';

}

const result = testAsync();

console.log(result);

PS E:\code\BXShop> node async.js

Promise { 'Hello async' }

await 在等待 async 方法执行完毕,其实 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();

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

Tags:AS SY YN NC 
作者:网络 来源:grace_fang