Promise的链式调用,简写方式
<script>
/**
* 需求:
* 网络请求得到数据aaa,假设自己有十行代码处理,将处理后的aaa111传入
* 继续进行代码处理,得到aaa222,再进行处理
*
*/
new Promise((resolve) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层10行代码处理');
//2.对结果进行10行代码处理
return new Promise((resolve) => {
resolve(res + '111')
})
}).then((res) => {
console.log(res, '第二层10行代码处理');
return new Promise((resolve) => {
resolve(res + '222')
})
}).then(res => {
console.log(res, '第三层10行代码处理');
})
/**
* 只有第一步有异步操作,其他两步根本没有异步操作,只是为了让结构更加清晰,
*采用Promise。
* 我们可以采用简写方式,直接调用Promise.resolve方法
*/
new Promise((resolve) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层10行代码处理');
//2.对结果进行10行代码处理
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) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层10行代码处理');
//2.对结果进行10行代码处理
return res + '111'
}).then((res) => {
console.log(res, '第二层10行代码处理');
return res + '222'
}).then(res => {
console.log(res, '第三层10行代码处理');
})
/**
* 同样如果要使用reject也可以简写
*/
new Promise((resolve,reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层10行代码处理');
//2.对结果进行10行代码处理
return Promise.reject('error message')
//也可以使用throw
//throw 'error message'
}).then((res) => {
console.log(res, '第二层10行代码处理');
return res + '222'
}).then(res => {
console.log(res, '第三层10行代码处理');
}).catch(err=>{
console.log(err);
})
</script>
没有异步操作,依然可以使用Promise进行链式调用,使代码结构更加清晰,操作分工明了
如果只有成功的情况,可以在new Promise时只传入resolve参数,reject参数是可选项
没有异步操作,可以有两种简写形式。
如果是失败也可以简写Promise.reject,也可以使用throw来抛出错误,最后在catch里都可以捕获,不过使用reject,下边的then就会失效。