第一种写法(基础写法)
话不多说直接上代码
<script>
//网络请求:aaa -> 对代码进行自己的处理
// 处理一:在aaa后面接上bbb -> aaabbb -> 对代码再次进行处理
// 处理二:将上一次的结果aaabbb后面加上ccc -> aaabbbccc -> 继续对代码进行下一步的处理
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
},1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层的10行处理代码');
//2.对结果进行第一次处理
return new Promise((resolve ,reject) => {
resolve(res + 'bbb')
})
}).then(res => {
console.log(res, '第二层的十行代码');
return new Promise((resolve) => {
//这个地方Promise里面的两个参数可以只写一个,reject是可以选的
resolve(res + 'ccc')
})
}).then(res => {
console.log(res, '第三层的世行处理代码');
})
</script>
第二种promise的简写方法
<script>
new Promise((resolve) => {
setTimeout(() => {
resolve('aaa')
},1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, '第一层的10行处理代码');
//2.对结果进行第一次处理
return Promise.resolve(res + 'bbb')
}).then(res => {
console.log(res, '第二层的十行代码');
//第三种简写
return Promise.resolve(res + 'ccc')
}).then(res => {
console.log(res, '第三层的世行处理代码');
})
</script>
只是将
return new Promise((resolve ,reject) => {
resolve(res + 'bbb')
})
这个代码替换成了return Promise.resolve(res + 'bbb')。
Promise最最最简介的写法来了
在第二中简写的写法上在进行简写,省略掉Promise.resolve。
将return Promise.resolve(res + 'bbb') => return res + 'bbb'
因为内部Promise会对return进行一个识别,然后进行包装。
具体代码我就不写了,只是在第二种简写的基础上进行一点点的修改。
总结一下:Promise的两种简写方案都基于第一种基础方案的写法,第一种基础方案懂了原理,后面两种方案也很容易理解。个人觉得代码主要是看原理,而不是代码量,等原理弄清楚了,对代码进行一步一步的修改,完善,减少书写不必要的代码。
以上内容我是在b站上一个叫ilovecoding的up主上传的vue视频学习中学到了,如果有什么不动可以私聊我,也可以去b站搜索这个老师的呦!感谢您的观看。