关于异步 | vuvivian's blog

程序执行顺序

function getDate(){ 1⃣️
    // ajax
    2⃣️setTimeout(function(){
        4⃣️var name = 'zhangsan'; 
    },1000);
    
    3⃣️return name; 
}

// 外部获取异步方法里边的数据
console.log(getData());  // undefined

回调函数获取异步方法中的数据

function getDate(callback){ 1⃣️
    // ajax
    2⃣️setTimeout(function(){
        4⃣️var name = 'zhangsan'; 
        callback(name)
    },1000);
    
    3⃣️return name; 
}

// 外部获取异步方法里边的数据
getData(function(data){
    console.log(data)
})

promise 处理异步

//方法一
var p = new Promise(function(resolve,reject){
    setTimeout(function(){
        var name="zhangsan";
        if(Math.random(),0.5){
            resolve(name);
        }else{
            reject('失败')
        }
       
    },1000);
})

p.then(function(data){
    console.log(data);
})

//方法二
function getData(resolve,reject){
    setTimeout(function(){
        var name="张三";
    },1000)
}

var p=new Promise(getData);

p.then((data) => {
    console.log(data)
})

async 与 await

async让方法变成异步,返回值是一个promise

async function getData(){
    return 'zhangsan'
}

console.log(getData())  // Promise{'zhangsan'}

获取async异步方法里面的数据的第一种方法

let p = getData();
p.then((data)=>{
    console.log(data)
})

await是等待异步方法执行完成, 是获取async异步方法里面的数据的第二种方法，但是必须用在异步方法里面

// 不可以这样直接用 
let d = await getData(); 
console.log(d) 

// 正确用法
async function test(){
    var d = await getData();
    console.log(d);
}

test();

await 阻塞的功能，将异步改为同步

async function getData(){
    cosnole.log(2)
    return 'zhangsan' 
}
async function test(){
     cosnole.log(1)
    var d = await getData();
    console.log(d);
     cosnole.log(3)
}

test(); //1 2 zhangsan 3

async 定义的方法返回的是Promise对象


function getData(){
    return new Promise((resolve,reject)=>{
       setTimeout(()=>{
           let username='lisi';
           resolve(username);
       }, 1000)
    })
}

// 普通方式
let p = getData();
p.then((data)=>{
    console.log(data)
})

// 通过async await
async function test(){
    var data = await getData();
    console.log(data);
}
test();