promise是异步编程的一种解决方案,解决回调地狱
下面简单举个例子:定时器异步事件
运用promise链式调用(链式编程的思想)
// 什么情况下会用到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);
}).catch((err) => {
console.log(err);
})
另外一种写法,我们可以看到其实就是箭头函数只有一个参数时括号可以省略哈哈~~
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('Hello Vuejs')
reject('error message')
}, 1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})
下面这三种写法意思一样,但是最后一种最简洁
reject同理,也可以简写,只不过遇到reject的时候跳到.catch()
.then(res => {
console.log(res, '第二层的10行处理代码');
return new Promise(resolve => {
resolve(res + '222')
})
})
.then(res => {
console.log(res, '第二层的10行处理代码');
return Promise.resolve(res + '222')
})
它内部会对res+'222'进行一个promise的包装,把它放在resolve里面
.then(res => {
console.log(res, '第二层的10行处理代码');
return res + '222'
})
还有一种方式,可以不用reject,直接手动抛出异常,如下图
promise的all方法(resove里面可以是数组,字符串,对象)
Promise.all([
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);
})