js的三种异步处理(代码片段)

mouseleo mouseleo     2022-12-06     496

关键词:

Promise 对象

  • 含义: Promise是异步编程的一种解决方案,
  • 优点: 相比传统回调函数和事件更加合理和优雅,Promise是链式编程(后面会详细讲述),有效的解决了令人头痛的回调地狱问题,Promise的结果有成功和失败两种状态,只有异步操作的结果,可以决定当前是哪一种状态,外界的任何操作都无法改变这个状态
  • 基本用法:
    //ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
    const p = new Promise(function(resolve,reject)
        if(success)
            resolve(‘成功的结果‘)
        else
            reject(‘失败的结果‘)
        
    )
    p.then(function (res) 
        // 接收resolve传来的数据,做些什么
        
    ,function (err) 
        // 接收reject传来的数据,做些什么
    )
    p.catch(function (err) 
        // 接收reject传来的数据或者捕捉到then()中的运行报错时,做些什么
    )
    p.finally(function()
        // 不管什么状态都执行
    )
  • 常用API
    • resolve 返回异步操作成功的结果
    • reject 返回异步操作失败的结果
    • then 执行Promise状态是成功的操作
    • catch 执行Promise状态是失败的操作
    • finally 不管Promise状态是成功或失败都执行的操作
  • Promise.all
    • Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
    const p = Promise.all([p1, p2, p3])
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

Generator 函数

  • 含义: Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,
    • 基本用法:
    function* helloGenerator() 
      yield ‘hello‘;
      yield ‘Generator‘;
      return ‘over‘;
    
    
    let hw = helloGenerator();
    hw.next()//value:"hello",done:false
    hw.next()//value:"Generator",done:false
    hw.next()//value:"over",done:true
    hw.next()//value:undfined,done:true
  • 特征:
    • 一是,function关键字与函数名之间有一个星号;
    • 二是,函数体内部使用yield表达式,定义不同的内部状态;
    • 三是,通过next方法获取每段状态的返回结果,上面分成4次执行了Gennrator函数,第一次,获取第一个yield函数的返回结果并暂停,done:false,代表函数内的状态还没有执行结束;第二次,同理;第三次,获取return 的返回结果,done:true表示函数内的状态已经执行完毕;第四次,函数内已经没有可以执行的状态,所有返回undfined,同时告诉函数内的状态已经执行完毕;如果函数内没有return,在第三次时返回undfined,done:true表示函数内的状态已经执行完毕

async 函数

  • 含义: async 函数是在ES2017 标准中引入的,async使得异步操作变得更加方便,其实他就是Generator 函数的语法糖
  • 基本用法:
    function get1()
        return new Promise((resolve,reject)=>
            setTimeout(()=>resolve(1),2000)
            
        )
    
    async function getSet()
        const n = await get1()
        //const n = await ‘111‘
        return n
    
    getSet().then(console.log)
  • 说明:
    • await命令只能用在async函数之中,如果用在普通函数,就会报错。
    • await后面是一个Promise对象,如get1 return出去的Promise实例;如果不是 Promise 对象,就直接返回对应的值,如直接返回‘111‘。
      • 1、若Promise 对象, 并且其以值 x 被 fulfilled, 则返回值为 x.
      • 2、Promise 对象, 并且其以异常 e 被 rejected, 则抛出异常 e
    • async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,如果任何一个await语句后面的 Promise 对象变为reject状态或遇到return,那么整个async函数都会中断执行。
    • 另外需要注意的是, await 在等待 Promise 对象时会导致 async function 暂停执行, 一直到 Promise 对象决议之后才会 async function 继续执行.
    • 如果我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。
    async function f() 
        try 
            await Promise.reject(‘出错了‘);
         catch(e) 
        
        return await Promise.resolve(‘hello world‘);
    

    f().then(v => console.log(v))
  • 优点: 相比Generator函数,async函数有如下四点改进
    • 内置执行器: Generator 函数的执行必须靠next()进行每一次的模块执行,async自带执行器,只需要和普通函数一样调用即可执行
    • **更好的语义:**async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
    • 返回值是Promise: async函数的返回值是 Promise 对象,可以用then方法指定下一步的操作;而且async函数完全可以看做多个异步函数的操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖,即Promise.all()的用法
    • **更广的适用性:**相较于Generator函数async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)
  • 补充
    • 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
    //此处省略getFoo(), getBar()两个函数
    
    // 写法一
    async function getSet()
        let [foo, bar] = await Promise.all([getFoo(), getBar()]);
        return [foo, bar]
    

    // 写法二
    async function getSet()
        let fooPromise = getFoo();
        let barPromise = getBar();
        let foo = await fooPromise;
        let bar = await barPromise;
        return [foo, bar]
    

*文章参考ECMAScript 6 入门 *

 

 
 

js异步加载的三种方式

一、同步加载  我们平时使用的最多的一种方式。<scriptsrc="http://yourdomain.com/script.js"></script><scriptsrc="http://yourdomain.com/script.js"></script>  同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析... 查看详情

原生js事件绑定的三种方式(代码片段)

JavaScript绑定事件的方法要想让JavaScript对用户的操作作出响应,首先要对DOM元素绑定"事件处理函数"。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的... 查看详情

原生js事件绑定的三种方式(代码片段)

JavaScript绑定事件的方法要想让JavaScript对用户的操作作出响应,首先要对DOM元素绑定"事件处理函数"。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的... 查看详情

springbootschedule定时任务实现异步的三种方法(代码片段)

前言我们创建一个定时任务实例@Component@EnableScheduling@Slf4jpublicclassSchedule@Scheduled(cron="*****?")publicvoidrun()throwsInterruptedExceptionSystem.out.println(DateUtil.format(new 查看详情

javascript循环中调用异步函数的三种方法,及为什么foreach无法工作的分析(代码片段)

JavaScript循环中调用异步函数的三种方法,及为什么forEach无法工作的分析业务分析初版的问题解决方案传统的for循环不使用for循环的解决方案分析forEach为什么不工作并行解决方案串行解决方案总结本文主要分析在循环体中怎... 查看详情

javascript循环中调用异步函数的三种方法,及为什么foreach无法工作的分析(代码片段)

JavaScript循环中调用异步函数的三种方法,及为什么forEach无法工作的分析业务分析初版的问题解决方案传统的for循环不使用for循环的解决方案分析forEach为什么不工作并行解决方案串行解决方案总结本文主要分析在循环体中怎... 查看详情

js异步加载的三种方式

  js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载,用到再加载,不用不加载,。  默认正常模式... 查看详情

日期处理的三种方式(代码片段)

一:使用注解的方式@JsonFormat注解该注解加在实体类中的日期类型上,可以将返回的Json字符串中的时间戳转换为具体时间@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")privateDateupdateTime;?我们通过使用@JsonFormat可以很好的解决:后台到... 查看详情

promise错误处理的三种方法(代码片段)

 1、传递参数,错误的原因functionf(val)returnnewPromise((resolve,reject)=>if(val)resolve(name:‘小明‘,100);//成功时也可以传递一个值,但需要注意的是只能传递一个参数,传两个的话第二个参数是拿不到的elsereject(‘404‘);//错误处理的第... 查看详情

reactjs事件处理的三种写法(代码片段)

目录前言1.在回调函数中使用箭头函数2.在构造器中绑定this3.使用类字段语法事件参数的传递。总结前言Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法。React事件名称使用驼峰命名,而不是全小写命名。使用JSX,... 查看详情

vue中数据请求的三种方法(代码片段)

注意请求可能存在跨域问题,需要去配置好这三种建议使用axios1.resource  Vue要实现异步加载需要使用到vue-resource库。  Vue.js2.0版本推荐使用axios 来完成ajax请求。  先导入一个线上cdn的地址,当然还可以去npm安装,但个... 查看详情

springmvc处理请求释放静态资源的三种方式(代码片段)

方式一在SpringMVC的配置文件中添加如下语句<mvc:default-servlet-handler/>说明:当SpringMVC前端控制器对静态资源进行拦截后,在通过处理器映射器找不到相关处理器的情况下该请求会被tomcat中web.xml中默认配置的Servlet拦截。方式二S... 查看详情

rocketmq(02)——发送消息的三种方式(代码片段)

发送消息的三种方式同步发送Producer在进行消息发送时可以是阻塞的,也可以是非阻塞的。具体对应到发送方式一共有三种,分别是同步、异步和单向的(ONEWAY)。之前介绍的调用send()返回SendResult的方法是阻塞的&... 查看详情

rocketmq(02)——发送消息的三种方式(代码片段)

发送消息的三种方式同步发送Producer在进行消息发送时可以是阻塞的,也可以是非阻塞的。具体对应到发送方式一共有三种,分别是同步、异步和单向的(ONEWAY)。之前介绍的调用send()返回SendResult的方法是阻塞的&... 查看详情

js中创建函数的三种方式及区别(代码片段)

1.函数声明functionsum1(n1,n2)returnn1+n2;;2.函数表达式,又叫函数字面量varsum2=function(n1,n2)returnn1+n2;;两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问;而函数表达式则必须等到解析器执行到它所在的代码行... 查看详情

前端js调用后端api获取数据的三种方法(2022.7.25)(代码片段)

前端js调用后台API获取数据的三种方法(2022.7.25)前言需求分析一个Get实例浏览器请求SoapUI软件请求一个Post实例浏览器请求SoapUI软件请求1、Http简介(Browser/Server)1.1六个主流的浏览器1.2HTTP请求(Get&Post࿰... 查看详情

前端js调用后端api获取数据的三种方法(2022.7.25)(代码片段)

前端js调用后台API获取数据的三种方法(2022.7.25)前言需求分析一个Get实例浏览器请求SoapUI软件请求一个Post实例浏览器请求SoapUI软件请求1、Http简介(Browser/Server)1.1六个主流的浏览器1.2HTTP请求(Get&Post࿰... 查看详情

vue提供的三种调试方式(代码片段)

Vue提供的三种调试方式一、在VSCode中配置调试二、debugger语句三、VueDevtools一、在VSCode中配置调试使用VueCLI2搭建项目时:更新config/index.js内的devtoolproperty:devtool:'source-map',点击在ActivityBar里的Debugger图标来到Debug视图&... 查看详情