promise使用

 

var ary1 = [], ary2 = [], ary3 = [], ary4 = [];
function proFn(num){
    return new Promise((resolve, reject) => {
        var ress = num * 2
        setTimeout(()=>{
            resolve(ress)
        },200)
    })
}
//直接得到结果，函数中有异步定时器，必须有async await才能获取正确数据，否则是空数组或者是promise实例
function aaa(num){
    var rrr = null
    setTimeout(async ()=>{
        rrr = await proFn(num)
        ary1.push(rrr)
        console.log('ary1',ary1)
    },500)
}
aaa(5)
// ------

// 直接得到结果，函数是async await
async function bbb(num){
　　 console.log(1);//先输出
    var rrr = null
    rrr = await proFn(num)
    ary2.push(rrr)
    console.log('ary2',ary2);//等待有结果后再输出
　　 console.log(3);//等待上一步输出后再输出
}
bbb(5)
// ------

// 函数是async await，在循环中使用then得到结果
async function ccc(num){
    for(var i=1;i<num;i++){
        await proFn(i).then((data)=>{
            ary3.push(data)
        })
    }
    console.log('ary3',ary3)
}
ccc(5)
// ------

// 普通函数，在循环中使用then，在函数中或者在函数外，必须用定时器才能得到结果
function ddd(num){
    for(var i=1;i<num;i++){
        proFn(i).then((data)=>{
            ary4.push(data)
        })
    }
    setTimeout(()=>{
        console.log('ary4',ary4)
    },500)
}
ddd(5)
// // 函数执行完成后必须在定时器里才能获取正确数据
setTimeout(()=>{
    console.log('ary4',ary4)
},500)

 

//有问题
var ary1 = []
var ary2 = []
function fn1(num){
    return new Promise((resolve,reject)=>{
        var a = 1
        var res1 = 0
        var res2 = 0
        res1 = a+num
        setTimeout(()=>{
            res2 = a+num
            resolve(res2)
        },200)
        // resolve(res1)
    })
}
//同步
async function fn2(){
    for(var i=1;i<4;i++){
        var c = await fn1(i)
        ary1.push(c)
    }
    console.log(ary1)
}
//异步
function fn3(){
    for(var i=1;i<4;i++){
        fn1(i).then((data)=>{
            ary2.push(data)
        })
    }
    console.log(ary2)//不加定时器就是空数组
}
fn2()
fn3()
// []    
// [2, 3, 4]
//先输出的是fn3()结果，而且点开数组内是有数据的，并且输出的length为0
//如果同步中不加await就会得到promise实力对象，并不能直接使用
//[Promise, Promise, Promise]
//__proto__: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: 2

//异步
function fn4(){
    for(var i=1;i<4;i++){
        var res = fn1(i).then((data)=>{
            console.log(data)
            // return data 在then里return没有用
        })
        ary2.push(res)
    }

    console.log(ary2)//先输出
}
fn4()
// [Promise, Promise, Promise]
// 2
// 3
// 4
// 虽然输出的data为数字值，但在then中return的data依然是promise实例

 

 

(function(){
Promise.resolve().then(()=>{
    console.log(0)//1
    return Promise.resolve(4)
}).then((res)=>{
    console.log(res)//5
    // console.log(Promise.resolve(4))    //先变成这步
    // Promise.resolve(4)                //再变成这步
})
Promise.resolve().then(()=>{
    console.log(1)//2
    // return Promise.resolve(4)
}).then(()=>{
    console.log(2)//3
}).then(()=>{
    console.log(3)//4
}).then(()=>{
    console.log(5)//6
}).then(()=>{
    console.log(6)//7
})
})()

 

var p = new Promise(function(resolve,reject){
    // foo.bar()//制造一个错误
    console.log('aaa')
    resolve(16)
})
p.then(function res(data){
    console.log('bbb',data)//异步
    // return data*2
    return new Promise(function(resolve,reject){
        //这样可以实现异步
        setTimeout(function(){
            resolve(data*2)
        },2000)
    })
},function rej(err){
    console.log('ccc',err)//同步
}).then(function(data){//链式调用，在上一个then中用return返回需要的值给data
    console.log('ddd',data)
})

 

function getY(x){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve((3*x)-1)
        },100)
    })
}
function foo(bar,baz){
    var x = bar * baz
    return [Promise.resolve(x),getY(x)] //[x,getY(x)] 这里传x，也会自动转为Promise实例
}
Promise.all(foo(10,20)).then(function fulfilled([x,y]){
    console.log(x,y)
},function rejected(err){
    console.log(err)
})

 

//主线程宏任务先执行，
//先清空微任务再执行宏任务
//return promise和new promise要等待两个周期
new Promise(resolve => {
    resolve(
        new Promise(resolve => {
            resolve(11);
        })
    );
}).then(res => {
    console.log('21');
});

new Promise(resolve => {
    resolve(2);
}).then(()=>{
    console.log('12')
}).then(()=>{
    console.log('13')
}).then(()=>{
    console.log('14')
})
// 12
// 13
// 21
// 14

//return promise和new promise要等待两个周期
Promise.resolve().then(()=>{
    console.log(0)
    return Promise.resolve(4)
}).then(res=>{
    console.log(res)
})
Promise.resolve().then(()=>{
    console.log(1)
}).then(()=>{
    console.log(2)
}).then(()=>{
    console.log(3)
}).then(()=>{
    console.log(5)
})
// 0
// 1
// 2
// 3
// 4
// 5

//宏任务先执行 script默认是一个宏任务
//之后的执行过程都是先清空微任务再来执行宏任务
//每次取出宏任务到主栈里执行完后都要清空一次微任务队列，再去取下一个宏任务
//先执行主栈代码，执行后清空一轮微任务，执行宏任务队列中的第一个，执行完后会再次清空微任务，清空下一个宏任务
//async + await => then     Promise.resolve
setTimeout(()=>{
    console.log('time1')
    Promise.resolve().then(data=>{
        console.log('3')
    })
},0)
Promise.resolve().then(data=>{
    console.log('1')
    setTimeout(()=>{
        console.log('time2')
    },0)
})
Promise.resolve().then(data=>{
    console.log('2')
})
//1
//2
//time1
//3
//time2

 

console.log(1)
setTimeout(function(){
    console.log(2)
    new Promise(function(resolve){
        console.log(4)
        resolve()
    }).then(function(){
        console.log(5)
    })
})
new Promise(function(resolve){
    console.log(7)
    resolve()
}).then(function(){
    console.log(8)
})
async function asy(){
    console.log(3)
    await awa()
    console.log(10)
}
async function awa(){
    console.log(6)
}
setTimeout(function(){
    console.log(9)
    new Promise(function (resolve){
        console.log(11)
        asy()
        resolve()
    }).then(function(){
        console.log(12)
    })
})

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)

new Promise((resolve)=>{
    console.log('promise1')
    async1()
    resolve()
}).then(function(){
    console.log('promise2')
})
console.log('script end')

 

async function foo(name) {
  console.log(name, "start");
  await console.log(name, "middle");
  console.log(name, "end");
}
foo("First");
foo("Second");
// First start
// First middle
// Second start
// Second middle
// First end
// Second end

对应到 Promise 的写法是：

function foo(name) {
  return new Promise((resolve) => {
    console.log(name, "start");
    resolve(console.log(name, "middle"));
  }).then(() => {
    console.log(name, "end");
  });
}