一、初识 Promise
Promise 是异步编程的一种解决方案（和异步操作有关系的时候会使用它）
- 可防止 “回调地狱”
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: "App",
created() {
/**
* 创建 Promise 对象
* 它的构造函数需要一个函数作为参数
* 该函数有两个参数（resolve 和 reject）, 它俩也是函数
* 当 resolve 被调用的时候，会执行 then 代码块的代码
*/
new Promise((resolve, reject) => {
// 发第一次网络请求的代码
setTimeout(() => {
resolve();
}, 1000);
}).then(() => {
console.log("第一次模拟网络请求后的回调");
return new Promise((resolve, reject) => {
// 发第二次网络请求的代码
setTimeout(() => {
resolve();
}, 1000);
}).then(() => {
console.log("第二次模拟网络请求后的回调");
return new Promise((resolve, reject) => {
// 发第三次网络请求的代码
setTimeout(() => {
resolve();
}, 1000);
}).then(() => {
console.log("第三次模拟网络请求后的回调");
});
});
});
},
};
</script>
<script>
export default {
onLoad() {
const fiveHundrend = 500
const twenty = 20
let result
/**
* 调用 resolve: 执行 then 代码块
* 调用 reject: 执行 catch 代码块
*/
new Promise((resolve, reject) => {
setTimeout(() => {
result = fiveHundrend + twenty
if (result % 2 !== 0) {
resolve('是偶数')
} else {
reject('是奇数')
}
}, 1111)
}).then(param => {
console.log("param: ", param);
}).catch(err => {
console.log("err: ", err);
})
},
}
</script>
上面代码的其他写法：
<script>
export default {
onLoad() {
const fiveHundrend = 500
const twenty = 20
let result
new Promise((resolve, reject) => {
setTimeout(() => {
result = fiveHundrend + twenty
if (result % 2 === 0) {
resolve('是偶数')
} else {
reject('是奇数')
}
}, 1111)
}).then(param => {
console.log("param: ", param);
}, err => {
console.log("error: ", err);
})
},
}
</script>
二、链式调用
<script>
export default {
onLoad() {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('I')
}, 1111)
}).then(param => {
console.log("第一次处理 ❀");
new Promise(resolve => {
resolve(param + 'Love')
}).then(param => {
console.log("第二次处理 ❀");
new Promise(resolve => {
resolve(param + 'You')
}).then(param => {
console.log("param: ", param);
})
})
}, err => {
console.log("error: ", err);
})
},
}
</script>
<script>
export default {
onLoad() {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('I')
}, 1111)
}).then(param => {
console.log("第一次处理 ❀");
Promise.resolve(param + 'Love').then(param => {
console.log("第二次处理 ❀");
Promise.resolve(param + 'You').then(param => {
console.log("param: ", param);
})
})
}, err => {
console.log("error: ", err);
})
},
}
</script>
<script>
export default {
onLoad() {
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('I')
}, 1111)
}).then(param => {
console.log("第一次处理 ❀");
return param + 'Love'
}).then(param => {
console.log("第二次处理 ❀");
return param + 'You'
}).then(param => {
console.log("param: ", param);
})
},
}
</script>
<script>
export default {
onLoad() {
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('I')
// return Promise.reject('错误了')
throw '哦吼! 错误了'
}, 1111)
}).then(param => {
console.log("第一次处理 ❀");
return param + 'Love'
}).then(param => {
console.log("第二次处理 ❀");
return param + 'You'
}).then(param => {
console.log("param: ", param);
}).catch(error => {
console.log("error: ",error);
})
},
}
</script>
三、Promise 的 all() 函数
多个网络请求的结果都获得后才进行后续请求
<script>
export default {
onLoad() {
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.sumOf100())
}, 2020)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.sumOf66666())
}, 1520)
})
]).then(results => {
console.log("results: ", results);
})
},
methods: {
sumOf100() {
let sum = 0
for (var i = 0; i <= 100; i++) {
sum += i
}
return sum
},
sumOf66666() {
let sum = 0
for (var i = 0; i <= 66666; i++) {
sum += i
}
return sum
}
}
}
</script>