Promise和async/await

2020-08-22  本文已影响0人  青乌

Promise和async/await都是异步处理的方法。async/await看起来更简单易用。

Promise:构造函数

let p = new Promise(function(resolve,reject){
    resolve('success');//成功回调
    reject('error');//失败回调        
})
//获取回调成功的数据
p.then(res => {
    console.log(res);
});
//获取回调失败的数据
p.catch(res => {
    console.log(res);
})

Promise.resolve() 和 Promise.reject()

let pp = Promise.resolve(p);
p.then(res => {
    console.log(res);
});

let pp = Promise.reject(p);
p.catch(res => {
    console.log(res);
});

多个函数Promise.all()

let p1 = Promise.resolve(123);
let p2 = Promise.resolve('hello');
let p3 = Promise.resolve('success');


Promise.all([p1,p2,p3]).then(result => {
    console.log(result);
}).catch(result => {
    console.log(result);
});

多个函数Promise.race():捕捉返回快的

function sleep(time) {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            res(time);
        },time);
    });
}

let p1 = sleep(500);
let p0 = sleep(2000);

Promise.race([p1,p0]).then(result => {
    console.log(result);//p1的结果
});

let p2 = new Promise((resolve,reject) => {
    setTimeout(()=>{
        reject('error');
    },1000);
});

Promise.race([p0,p2]).then(result => {
    console.log(result);//p2的结果
}).catch(result => {
    console.log(result);
});

Async-Await :其实就是语法糖

对比 promise ,Async-Await 用法极其简单。

async function p() {
    let result = await Promise.resolve(123);//直接使用回调
    console.log(result);
    return result;
}
p()//获取回调数据

//请求数据
//直接处理promise返回
async function pp(){
    let data = await axios("xxx").then(res => res.data);
    return data
}
//返回promise再处理
async function pp(){
    let data = await axios("xxx");
    return data
}
pp().then(res => res.data)
pp().catch(err => console.log(err))//错误处理

try catch捕捉错误时,内部错误不会被捕捉,还是需要catch回调捕捉。

let p = new Promise((resolve,reject) => {
    setTimeout(() => {
        reject('error');
    },1000);
});

async function demo(params) {
    try {
        let result = await p;
    }catch(e) {
        console.log(e);
    }
}

demo();
上一篇下一篇

猜你喜欢

热点阅读