promise详解

ZEHAN

发布于 2020-09-23 18:04:00

6690

发布于 2020-09-23 18:04:00

// 1.使用setTimeout // setTimeout(() => { // console.log(‘Hello World’); // }, 1000)

// 什么情况下会用到Promise? // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 // new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数) // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数

new Promise((resolve, reject) => {
    setTimeout(() => {
    // 成功的时候调用resolve
    // resolve('Hello World')

    // 失败的时候调用reject
    reject('error message')
    }, 1000)
}).then((data) => {
    // 1.100行的处理代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
}).catch((err) => {
    console.log(err);
})

promise另一种处理形式 then后面直接跟,请求失败返回err 不写catch

new Promise((resolve, reject) => {
    setTimeout(() => {
    // resolve('Hello Vuejs')
    reject('error message')
    }, 1000)
}).then(data => {
    console.log(data);
}, err => {
    console.log(err);
})

promise的链式调用

    // 参数 -> 函数(resolve, reject)
// resolve, reject本身它们又是函数
// 链式编程
new Promise((resolve, reject) => {

    // 第一次网络请求的代码
    setTimeout(() => {
    resolve()
    }, 1000)

}).then(() => {
    // 第一次拿到结果的处理代码
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');

    return new Promise((resolve, reject) => {

    // 第二次网络请求的代码
    setTimeout(() => {
        resolve()
    }, 1000)
    })
}).then(() => {

    // 第二次处理的代码
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');

    return new Promise((resolve, reject) => {

    // 第三次网络请求的代码
    setTimeout(() => {
        resolve()
    })
    })
}).then(() => {

    // 第三处理的代码
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
})

链式调用(二)

            // 请求一:
let isResult1 = false
let isResult2 = false
$ajax({
    url: '',
    success: function () {
    console.log('结果1');
    isResult1 = true
    handleResult()
    }            // 请求一:
let isResult1 = false
let isResult2 = false
$ajax({
    url: '',
    success: function () {
    console.log('结果1');
    isResult1 = true
    handleResult()
    }
})
// 请求二:
$ajax({
    url: '',
    success: function () {
    console.log('结果2');
    isResult2 = true
    handleResult()
    }
})

function handleResult() {
    if (isResult1 && isResult2) {
    //
    }
}

// wrapped into
// 网络请求: aaa -> 自己处理(10行)
// 处理: aaa111 -> 自己处理(10行)
// 处理: aaa111222 -> 自己处理
// new Promise((resolve, reject) => {
//   setTimeout(() => {
//     resolve('aaa')
//   }, 1000)
// }).then(res => {
//   // 1.自己处理10行代码
//   console.log(res, '第一层的10行处理代码');
//
//   // 2.对结果进行第一次处理
//   return new Promise((resolve, reject) => {
//     // resolve(res + '111')
//     reject('err')
//   })
// }).then(res => {
//   console.log(res, '第二层的10行处理代码');
//
//   return new Promise(resolve => {
//     resolve(res + '222')
//   })
// }).then(res => {
//   console.log(res, '第三层的10行处理代码');
// }).catch(err => {
//   console.log(err);
// })

// new Promise(resolve => resolve(结果))简写
new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return Promise.resolve(res + '111')
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
}).then(res => {
    console.log(res, '第三层的10行处理代码');
})

// 省略掉Promise.resolve
new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return res + '111'
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return res + '222'
}).then(res => {
    console.log(res, '第三层的10行处理代码');
})


new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    // return Promise.reject('error message')
    throw 'error message'   
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
}).then(res => {
    console.log(res, '第三层的10行处理代码');
}).catch(err => {
    console.log(err);
})'',
    success: function () {
    console.log('结果2');
    isResult2 = true
    handleResult()
    }
})

function handleResult() {
    if (isResult1 && isResult2) {
    //
    }
}

// wrapped into
// 网络请求: aaa -> 自己处理(10行)
// 处理: aaa111 -> 自己处理(10行)
// 处理: aaa111222 -> 自己处理
// new Promise((resolve, reject) => {
//   setTimeout(() => {
//     resolve('aaa')
//   }, 1000)
// }).then(res => {
//   // 1.自己处理10行代码
//   console.log(res, '第一层的10行处理代码');
//
//   // 2.对结果进行第一次处理
//   return new Promise((resolve, reject) => {
//     // resolve(res + '111')
//     reject('err')
//   })
// }).then(res => {
//   console.log(res, '第二层的10行处理代码');
//
//   return new Promise(resolve => {
//     resolve(res + '222')
//   })
// }).then(res => {
//   console.log(res, '第三层的10行处理代码');
// }).catch(err => {
//   console.log(err);
// })

// new Promise(resolve => resolve(结果))简写
new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return Promise.resolve(res + '111')
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
}).then(res => {
    console.log(res, '第三层的10行处理代码');
})

// 省略掉Promise.resolve
new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    return res + '111'
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return res + '222'
}).then(res => {
    console.log(res, '第三层的10行处理代码');
})


new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('aaa')
    }, 1000)
}).then(res => {
    // 1.自己处理10行代码
    console.log(res, '第一层的10行处理代码');

    // 2.对结果进行第一次处理
    // return Promise.reject('error message')
    throw 'error message'   
}).then(res => {
    console.log(res, '第二层的10行处理代码');

    return Promise.resolve(res + '222')
}).then(res => {
    console.log(res, '第三层的10行处理代码');
}).catch(err => {
    console.log(err);
})

(throw直接抛出错误信息)

promise.all()的使用

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise 它接收一个数组作为参数数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变当所有的子Promise都完成，该Promise完成，返回值是全部值得数组有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

// 请求一:
// let isResult1 = false
// let isResult2 = false
// $ajax({
//   url: '',
//   success: function () {
//     console.log('结果1');
//     isResult1 = true
//     handleResult()
//   }
// })
// // 请求二:
// $ajax({
//   url: '',
//   success: function () {
//     console.log('结果2');
//     isResult2 = true
//     handleResult()
//   }
// })
//
// function handleResult() {
//   if (isResult1 && isResult2) {
//     //
//   }
// }


Promise.all([
    // new Promise((resolve, reject) => {
    //   $.ajax({
    //     url: 'url1',
    //     success: function (data) {
    //       resolve(data)
    //     }
    //   })
    // }),
    // new Promise((resolve, reject) => {
    //   $.ajax({
    //     url: 'url2',
    //     success: function (data) {
    //       resolve(data)
    //     }
    //   })
    // })

    new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({name: 'why', age: 18})
    }, 2000)
    }),
    new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({name: 'kobe', age: 19})
    }, 1000)
    })
]).then(results => {
    console.log(results);
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript