Promise与async/await -- 处理异步

使用场景

promise、async、await 一般在请求接口中使用，解决回调问题。

Promise

Promise是一个对象，可以通过promise获取异步操作的结果。

1 new Promise((resolve, reject) => {
2 
3 })

1 let p = new Promise( (resolve, reject) => {
2     // ...这里是异步操作
3     const data = {}
4     resolve(data)
5 } )
6 
7 p.then( data => {
8     console.log(data)
9 })

 1 const promise = new Promise((resolve, reject) => {
 2   axiso.post('https://github.com/users', param)
 3      .then(response => { resolve(response) })
 4      .catch(err => { reject(err)})
 5 });
 6 
 7 promise
 8   .then(value => console.log(value))
 9   .catch(err => console.log(err));
10 
11 //也可以采取下面这种写法
12 promise.then((value) => {
13   console.log(value);
14 },(err) => {
15   console.log(err);
16 });

当异步操作需要用到上一个异步操作的结果：

 1 const getUserId = function () {
 2  return new Promise((resolve, reject) => {
 3             axiso.post('/getUserId')
 4                .then(res => { resolve(res) })
 5                .catch( err => { reject(err) })
 6     })
 7 }
 8 
 9 const getProfile = function ( id ) {
10  return new Promise((resolve, reject) => {
11             axiso.post('/getUserId', {id : id})
12                .then(res => { resolve(res) })
13                .catch( err => { reject(err) })
14     })
15 }
16 
17 
18 getUserId()
19 .then(res=>{ return getProfile(res.id)})
20 .then(profile => { console.log(profile)})
21 .catch( err => { console.log(err)})

当异步操作需要用到前面几个异步操作的结果： Promise.all():

返回一个新的promise对象，其中所有promise的对象成功触发的时候，该对象才会触发成功，若有任何一个发成错误，就会触发改对象的失败方法。成功触发的返回值是所有promise对象返回值组成的数组。

 1 //设置三个任务
 2 const tasks = {
 3   task1() {
 4     return new Promise(...); //return 1
 5   },
 6   
 7   task2() {
 8     return new Promise(...); // return 2
 9   },
10   
11   task3() {
12     return new Promise(...); // return 3
13   }
14 };
15 
16 //列表中的所有任务会并发执行，当所有任务执行状态都为fulfilled后，执行then方法
17 Promise.all([tasks.task1(), tasks.task2(), tasks.task3()]).then(result => console.log(result));
18 //最终结果为：[1,2,3]

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);
})

// 结果：
// [ 123, 'hello', 'success' ]

async/await

虽然Promise解决了回调地狱（callback hell)的问题，但是仍然需要在使用的时候考虑到非同步的情况，并且相对的把回调“纵向发展”了，形成了一个回调链。

function sleep(wait) {
    return new Promise((res,rej) => {
        setTimeout(() => {
            res(wait);
        },wait);
    });
}

/*
let p1 = sleep(100);
let p2 = sleep(200);
let p =*/

sleep(100).then(result => {
    return sleep(result + 100);
}).then(result02 => {
    return sleep(result02 + 100);
}).then(result03 => {
    console.log(result03);
})

使用async/await

async function demo() {
    let result01 = await sleep(100);
    //上一个await执行之后才会执行下一句
    let result02 = await sleep(result01 + 100);
    let result03 = await sleep(result02 + 100);
    // console.log(result03);
    return result03;
}

demo().then(result => {　　
    console.log(result);
});

捕获错误

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

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

demo().catch((err) => {
    console.log(err);
})