Promise与async/await -- 处理异步

使用场景

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

Promise

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

 

new Promise((resolve, reject) => {

})

 

let p = new Promise( (resolve, reject) => {
    // ...这里是异步操作
    const data = {}
    resolve(data)
} )

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

const promise = new Promise((resolve, reject) => {
  axiso.post('https://github.com/users', param)
     .then(response => { resolve(response) })
     .catch(err => { reject(err)})
});

promise
  .then(value => console.log(value))
  .catch(err => console.log(err));

//也可以采取下面这种写法
promise.then((value) => {
  console.log(value);
},(err) => {
  console.log(err);
});

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

const getUserId = function () {
 return new Promise((resolve, reject) => {
            axiso.post('/getUserId')
               .then(res => { resolve(res) })
               .catch( err => { reject(err) })
    })
}

const getProfile = function ( id ) {
 return new Promise((resolve, reject) => {
            axiso.post('/getUserId', {id : id})
               .then(res => { resolve(res) })
               .catch( err => { reject(err) })
    })
}


getUserId()
.then(res=>{ return getProfile(res.id)})
.then(profile => { console.log(profile)})
.catch( err => { console.log(err)})

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

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

//设置三个任务
const tasks = {
  task1() {
    return new Promise(...); //return 1
  },
  
  task2() {
    return new Promise(...); // return 2
  },
  
  task3() {
    return new Promise(...); // return 3
  }
};

//列表中的所有任务会并发执行，当所有任务执行状态都为fulfilled后，执行then方法
Promise.all([tasks.task1(), tasks.task2(), tasks.task3()]).then(result => console.log(result));
//最终结果为：[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);
})