awaitTo处理

目标: 让await 可以接收失败的情况

原理: then()和catch()里的return 都会返回给下一个then函数

// 1. 基础理解: then和catch里return都会赋予给下个then, 而await可以拿到then的结果
// let pA = new Promise((resolve, reject) => {
//     setTimeout(() => {
//         // resolve("假设ajax成功")
//         reject("假设ajax报错了")
//     }, 1000)
// })
// let pB = pA.then(res => {
//     return res;
// }).catch(err => {
//     return err;
// })

// // (1). 用then来接受上一个Promise的then/catch里return出来的结果
// // pB.then(res => {
// //     console.log(res);
// // })

// // (2). await 可以接收一个Promise对象then的结果
// async function a(){
//     const result = await pB;
//     console.log(result);
// }
// a();



// 2. return数据的格式
// await接收的结果既是成功/失败
// let pA = new Promise((resolve, reject) => {
//     setTimeout(() => {
//         // resolve("假设ajax成功")
//         reject("假设ajax报错了")
//     }, 1000)
// })
// // let pB = pA.then(res => {
// //     return [null, res];
// // }).catch(err => {
// //     return [err, null];
// // })
// // 及简写法
// let pB = pA.then(res => [null, res]).catch(err => [err, null])

// async function a(){
//     const result = await pB;
//     console.log(result);
// }
// a();



// 3. 最终版本 - 对中间pB封装to函数
let pA = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("假设ajax成功")
        reject("假设ajax报错了")
    }, 1000)
})

// 把PromiseObj包装一下, 返回新的Promise对象(可以返回正确/失败的错误结果)
function to(promiseObj){
    return promiseObj.then(res => [null, res]).catch(err => [err, null])
}

async function a(){
    const result = await to(pA);
    console.log(result);
}
a();

封装utils/awaitTo.js

// 非简写版本(方便理解)
// function to (promiseObj) {
//   const newPromise = promiseObj.then(function (res) {
//     return [null, res]
//   }).catch(function (err) {
//     return [err, null]
//   })

//   return newPromise
// }
// export default to

// 简写:
export default promiseObj => promiseObj.then(res => [null, res]).catch(err => [err, null])

在App.vue中使用-替代try+catch

// 问题2: 我不想要这么多大括号, 采用await-to技术
const [err, res] = await to(test2API())
if (err) return console.error(err.toString())
else console.log(res)