首页 > 其他分享 >Promise的使用

Promise的使用

时间:2022-11-26 14:56:53浏览次数:47  
标签:resolve console log res await Promise 使用

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

相关文章

  • Javascript(笔记52) - promise - 2 API和方法
    Promise 构造函数Promise(excutor){}1)executor 函数:执行器(resolve,reject)=>{}2)resolve 函数:内部定义成功时我们调用的函数value=>{}3)reject函数:内定定义失败时我们......
  • kali2021.4a安装angr(使用virtualenv)
    在Linux中安装各种依赖python的软件时,最头疼的问题之一就是各个软件的python版本不匹配的问题,angr依赖python3,因此考虑使用virtualenv来安装angrVirtualenv简介virtualen......
  • 使用Docker恢复Mysql8备份的Data数据 - 诚哥博客
    前段时间公司数据库服务器崩溃启动不起来,经过我初步排查是/home目录挂载不上导致启动不起来,虽然通过注释/etc/fstab中的挂载信息,启动了,但是发现mysql数据有缺失,还好有例......
  • 查出使用cpu最高的sql 和各种sql使用率查询
    方法一::   方法二::     SELECTsql_textFROMv$sqltextaWHERE(a.hash_value,a.address)IN(SELECTDECODE(sql_hash_value,0,prev_hash_value,sql......
  • 使用vscode插件查看文件的16进制
    有时候想看看文件的16进制,又不想编写代码来处理,那么这时候可以使用vscode和插件HexEditor一键查看文件的16进制然后就可以查看文件的16进制了......
  • 最新内网穿透frp搭建使用教程-保姆版
    FRP1.前提准备公网域名,公网服务器2.设置二级子域名并解析二级域名解析云服务器端口放行3.去下载frp开源工具https://github.com/fatedier/frp/releases......
  • Orleans基础知识以及使用示例
    Orleans简介Orleans是一个与ABP齐名,支持有状态云生应用/服务水平伸缩的基于VirtualActor模型的.NET分布式应用框架。 Actor模型简单来讲:Actor模型=状态+行为......
  • 5-6 显示html页面-使用post实现登录
    1.创建自己的应用(app)文件夹执行下面的命令,将自动生成对应的文件夹polls是应用名称,可以自己更改pythonmanage.pystartapppolls在主文件中settings中添加应用......
  • Nginx的使用讲解
    Author:Ericversion:9.0.1 文章目录​​一、引言​​​​1.1代理问题​​​​1.2负载均衡问题​​​​1.3资源优化​​​​1.4Nginx处理​​​​二、Nginx概述​​​​三......
  • 【Amadeus原创】Centos使用图形化界面配置网络
    1.查看当前ip地址#ipaddr2.图形化界面配置网卡#nmtui界面提示,左右上下配置,OK即可。......