es6异步函数调用

  开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况:

$(‘.animateEle‘).animate({
    opacity:‘.5‘
}, 4000,function(){  //回调
    $(‘.animateEle2‘).animate({
        width:‘100px‘
    },2000,function(){  //回调
        $(‘.animateEle3‘).animate({
            height:‘0‘
        },1000,function(){
            .......太乱
       });
    });
});

  回调函数嵌入太多了,看晕了都,代码很不美观,于是es6加入了新特性解决这个问题,Promise.

  Promise最大的好处就是可以链式的调用函数,起到异步回调函数的作用,看起来更加直观简洁,

  resolve 和 reject

  这是Promis最重要的两个方法,resolve方法可以让Promise对象的状态变为成功,reject是失败,举个例子一目了然:

        function print (ready) {
            return new Promise ((resolve, reject)=>{
                if(ready){
                    resolve("Hello World!");
                }else{
                    reject("Good bye!");
                }
            })
        }

        print(true).then(message=>{
            alert(message);
        },error=>{
            alert(error);
        }
        );

  then

  Promise通常配合then方法来链式的使用,then方法里面第一个回调函数表示成功状态,也就是resolve,第二个是失败状态-reject,如果默认写一个参数的话,默认resolve

  代码会输出 Hello World!

  一个看不出来,多几个依赖状态就看着明显了:

        function Print (ready) {
            return new Promise ((resolve,reject)=>{
                if(ready){
                    resolve("Hello World!");
                }else{
                    reject("Good bye!");
                }
            });
        }
        function print1 () {
            alert("World");
        }
        function print2 () {
            alert("!");
        }
        Print(true)
            .then(message=>{alert(message);})
            .then(print1)
            .then(print2)

  上面的代码依次等到上一个Promise对象返回成功后依次调用,否则按照老式的写法还得包进回调函数里,包好几层就很不方便容易看晕,这样链式的调用取代老式写法,这是Promise最常用的。

  catch:

  当返回发生错误的时候,会触发catch,可以写成then(fn).catch(fn),相当于 then(fn).then(null, fn);

        function Print (ready) {
            return new Promise ((resolve,reject)=>{
                if(ready){
                    resolve("Hello World!");
                }else{
                    reject("Good bye!");
                }
            });
        }
        function print1 () {
            alert("World");
        }
        function print2 () {
            alert("!");
        }
    function catch_error () {
      alert(‘error‘);
    }
        Print(false)
            .then(message=>{alert(message);})
            .then(print1)
            .then(print2)
        .catch(catch_error)

  失败的状态其实可以写进then的第二个参数里,但是一般不用那么些,用catch捕获更符合promise的初衷

  all: 

  Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回

var p1 = new Promise(resolve=>{
  setTimeout(()=>{
    resolve("Hello");
  },3000);
});

var p2 = new Promise(resolve=>{
  setTimeout(()=>{
    resolve("World");
  },1000);
});

Promise.all([p1, p2]).then(result=>{
  console.log(result);
});

  还有一个和 Promise.all 相类似的方法 Promise.race,它同样接收一个数组,不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。

  es6的Promise还有一些方法,就不写了,以上是常用的.

  es7里还有async函数,也起到异步作用,就不多说了先.

  兼容性不是很好,vue开发的时候常常会用babel转码,要么使用jquery的Deferred对象,用法跟Promise差不多。

时间: 2024-11-04 23:37:12

es6异步函数调用的相关文章

es6异步解决方案

最初使用回调函数 ? 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用. ? 但是node中有明确的规范 ? node中的的回调模式: 1. 所有回调函数必须有两个参数,第一个参数表示错误,第二个参数表示结果 2. 所有回调函数必须作为函数最后的参数 3. 所有回调函数不能作为属性出现 es6 异步处理模型 Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型.该模型有:

es6异步编程 Promise 讲解 --------各个优点缺点总结

//引入模块 let fs=require('fs'); //异步读文件方法,但是同步执行 function read(url) { //new Promise 需要传入一个executor 执行器 //executor需要传入两个函数 resolve reject return new Promise((resolve,reject)=>{ fs.readFile(url,'utf8',function (err,data) { if(err){ reject(err) }else{ reso

ES6 异步编程解决方案 之 Async

一.async 函数的基本用法 async 函数返回一个 Promise 对象,可以使用 then .catch 方法 添加回调函数 async 函数执行时,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句 [异步函数 同步执行] async 函数有很多种形式: // 函数声明 async function foo() {} // 函数表达式 const foo = async function () {}; // 箭头函数 const foo = async (

切图崽的自我修养-[ES6] 异步函数管理方案浅析

前言 业务开发中经常会用到异步函数,这里简单的对异步函数以及它的各种各样的解决方案做一个浅析 优缺点: 优点: 能够极大的提高程序并发业务逻辑的能力. 缺点: 异步函数的书写方式和代码执行逻辑很不直观,回调函数这种方式不太符合人类的的线性思维 异步函数的执行流程通常不好管理 不好对异步函数部署错误处理机制 解决方案 针对异步函数存在的缺点,所以才有了形形色色的异步的处理方案,常见的比如 原生的回调函数 promise/A+ async/await(generator); 业务场景 但这些解决方案

你不知道的this—JS异步编程中的this

Javascript小学生都知道了javascript中的函数调用时会 隐性的接收两个附加的参数:this和arguments.参数this在javascript编程中占据中非常重要的地位,它的值取决于调用的模式.总的来说Javascript中函数一共有4中调用模式:方法调用模式.普通函数调用模式.构造器调用模式.apply/call调用模式.这些模式在如何初始化关键参数this上存在差异.“可能还有小伙伴不知道它们之间的区别,那我就勉为其难撸一撸吧!” 方法调用模式:函数是在某个明确的上下文对

Node.js之路【第三篇】NodeJS异步实现

NodeJS异步实现 Node.js异步编程的直接体现就是回调,它依托于回调来实现,但不能说使用了回调他就是异步了 回调函数在完成任务后就会被调用,Node使用了大量的回调函数,Node所有的API都支持回调函数 例如:我们可以一边读取文件一边执行其他命令,在文件读取完成后,我们将文件内容作为回调的参数返回,这样执行代码的时候就不会有阻塞或等待I/O操作 这样就打打提高了Node.js性能,可以处理大量的并发请求. 一.阻塞代码示例 1.创建一个测试文件text.txt文件内容如下: 文件I/O

【javascript 进阶】异步调用

前言 javascript的中的异步是很重要的概念,特别是ajax的提出,给整个web带来了很大的影响,今天就介绍下javascript的异步编程. 同步与异步 何为同步?何为异步呢? 同步:说白了就是程序一步一步从下向下执行,没有什么别的代码的跳动,就是按序执行,和在景区里女生上厕所是排队是一样的(每次女厕都是有好多人在排队).可以看成是一个单线程问题. 异步:异步就是程序可以跳着执行,开始执行一段程序之后不用等返回结果就执行其他的代码,等结果返回之后在对结果进行处理,也就是可以在有限的时间内

C#基础之异步调用实例教程

本文实例形式展示了C#中异步调用的实现方法,并对其原理进行了较为深入的分析,现以教程的方式分享给大家供大家参考之用.具体如下: 首先我们来看一个简单的例子: 小明在烧水,等水烧开以后,将开水灌入热水瓶,然后开始整理家务 小文在烧水,在烧水的过程中整理家务,等水烧开以后,放下手中的家务活,将开水灌入热水瓶,然后继续整理家务 这也是日常生活中很常见的情形,小文的办事效率明显要高于小明.从C#程序执行的角度考虑,小明使用的同步处理方式,而小文则使用的异步处理方式. 同步处理方式下,事务是按顺序一件一件

js同步-异步-回调

出处:https://blog.csdn.net/u010297791/article/details/71158212(1)上面主要讲了同步和回调执行顺序的问题,接着我就举一个包含同步.异步.回调的例子. let a = new Promise(//声明了一个Promise回调函数,能够使用then function(resolve, reject) { console.log(1) setTimeout(() => console.log(2), 0) console.log(3) cons