一、Promise的简单使用
Promise可以用来封装异步操作,表示将来会发生某个操作,可以直接通过new对象来使用
let p1 = new Promise(function (resolve, reject) {
setTimeout(() => {
console.log("p1");
resolve("p1 return");
}, 1000);
});
当一个Promise对象new出来以后它内部的异步操作就会被作为js异步任务等待执行,所以可以把new对象封装到一个方法中,当需要的时候再调用方法
function p1() {
let p1 = new Promise(function (resolve, reject) {
setTimeout(() => {
console.log("p1");
resolve("p1 return");
}, 1000);
});
return p1;
}
p1();
promise对象有一个.then方法可以传递回调函数,再回调函数中可以拿到new Promise时执行resolve传递的参数
p1().then(res=>{
console.log(res)
});
这里这个res就时上边resolve传递的'p1 return'
二、Promise的链式调用
在一个promise的then里边可以再次返回一个promise对象,这样就可以在外层继续.then调用
function async1(){
return new Promise((resolve,reject)=>{
console.log('async1');
resolve('async1 return')
})
}
function async2(){
return new Promise((resolve,reject)=>{
console.log('async2');
resolve('async2 return')
})
}
async1().then(res=>{
console.log(res)
//这里返回一个promise对象可以在外层链式调用继续.then
return async2()
}).then(res=>{
console.log(res);
//这里如果返回一个普通值,会被包装成一个promise对象,也可以继续链式调用
return 666
}) .then(res=>{
console.log(res)
})
三、async await简化 promsie操作
要使用Promise中异步操作的返回值,需要调用promise的then方法,这种方式相对比较麻烦,await可以用来简化
promise操作。
function async1(){
return new Promise((resolve,reject)=>{
console.log('async1');
resolve(18)
})
}
let a=10
async1().then(res=>{
a=res;
})
console.log(a)
这样打印出a=10,因为then中的回调是异步执行的,打印语句是同步执行的,只有把打印语句也放在回调函数中才能打印到最新的值。同时也可以使用await来简化进行
function async1(){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("async1");
resolve(18);
}, 1000);
});
}
let a=10
async function test1(){
await async1().then(res=>{
a=res
})
console.log(a);
}
test1()
因为await必须出现在async函数中,所以外边又包了一层函数,await后边的代码会等待await这块的异步任务和回调函数执行完后执行,所以这里会打印出18。
同时await还可以获取到promise对象中的值,所以我们可以省略then写法
async function test1(){
//await会把后边返回的promise进行处理,相当于把then中的res赋值给前边的变量
let b = await async1()
a=b;
console.log(a);
}
这样变量b就能拿到异步操作的返回值
需要注意的是await只会在当前方法生效,举个例子
let a = 10;
async function test1() {
//await会把后边返回的promise进行处理,相当于把then中的res赋值给前边的变量
let b = await async1();
a = b;
}
test1();
console.log(a);
这样打印出的a就是10,因为被async修饰的方法test1变成了一个异步方法,它下面的代码是同步的,打印语句执行的时候test1还没执行完。那么怎样等待test1执行完再进行后续操作呢,
可以这样,
test1().then(res=>{
console.log(a);
});
能这样是因为tes1的返回值变成了一个promise对象,res就代表test1的返回值,当方法没返回值时res就是undefined
既然是一个promise对象就可以被await,所以也可以这样,只不过需要再包一层函数,因为await必须在async函数中
let a = 10;
async function test1() {
//await会把后边返回的promise进行处理,相当于把then中的res赋值给前边的变量
let b = await async1();
a = b;
}
async function test2(){
await test1()
console.log(a);
}
test2()
标签:resolve,console,log,res,await,Promise,使用
From: https://www.cnblogs.com/chengxuxiaoyuan/p/16927417.html