Promise是一个构造函数
var p = new Promise(function(resolve, reject) {
// 异步操作
setTimeout(function() {
console.log('success');
resolve('async data');
}, 2000);
}).then((data) => {
console.log(data);
});
运行代码,会在2秒后输出“success”和“async data”。注意!我只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数。
function runAsync() {
var p = new Promise(function(resolve, reject) {
// 异步操作
setTimeout(function() {
console.log('success');
resolve('async data');
}, 2000);
}).then((data) => {
console.log(data);
});
return p;
}
runAsync();
Promise构造函数之后仍然返回一个Promise对象,调用then方法,then()接收一个函数类型的参数,并且会拿到在调用resolve方法传递的数据。then()其实就跟我们平时说的回调函数是同一个意思,在异步操作之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。
Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。
function runAsync() {
var p = new Promise(function(resolve, reject) {
// 异步操作
setTimeout(function() {
console.log('success');
resolve('async data');
}, 2000);
})
return p;
}
runAsync().then((data) => {
console.log('successed result: ' + data);
});
运行这个js文件,在2秒后输出”success” 和”successed result: async data”。
在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据了。
function runAsync1() {
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('async task 1 success');
resolve('output data1');
}, 2000);
});
return p;
}
function runAsync2() {
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('async task 2 success');
resolve('output data2');
}, 2000);
});
return p;
}
function runAsync3() {
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('async task 3 success');
resolve('output data3');
}, 2000);
});
return p;
}
runAsync1().then(function(data) {
console.log(data);
return runAsync2();
}).then(function(data) {
console.log(data);
return 'return a string not a promise!'
}).then(function(data) {
console.log(data);
});
输出结果:
async task 1 success
output data1
async task 2 success
output data2
return a string not a promise!
失败的回调函数reject和resolve类似,传递一个参数,当执行失败时将对应的数据传递过去。
Promise.all
function resolve(millis, value) {
return new Promise(resolve => setTimeout(() => resolve(value), millis));
}
Promise.all([
resolve(5000, 1),
resolve(6000, 2),
{ hello: 3}
]).then(values => console.log(values));
// [1, 2, { hello: 3 }]