一、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()