promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

*   promise承诺
    *   解决js中异步编程的问题
    *
    *   异步-同步
    *   阻塞-无阻塞
    *
    *   同步和异步的区别?

  异步;同步 指的是被请求者

    解析:被请求者(该事情的处理者)在处理完事情的时候的通知机制。
        异步:当事情处理完成后被请求者会发信息通知请求者该事情处理完成。在这期间被请求者可以选择是继续等待命令请求完成还是去做其他事等待被请求者返回。
        同步:当事情处理完成后被请求者不会告知请求者,等到请求者发来询问是才会告知
    阻塞;非阻塞 指的是请求者
        阻塞:针对请求者来说的,委托其他人处理一些事情的时候,被请求者是等待请求处理完成还是继续向下执行其他任务。阻塞就是等待事情完成才继续执行
        非阻塞:针对请求者来说,请求者委托被请求者处理一些事情时不等被请求者答案先去做其他事,并且每隔一段时间询问被请求者该事件是否完成。
    js采用的是异步非阻塞模式。

promise 是一个构造函数(在什么时候要用promise当我们进行一些操作需要同步进行时)
    通过new promise进行调用
        Promise:
    *   构造函数
    *   new Promise(callback)
    *       callback: 要异步处理的任务
    通过Promise构造函数得到一个Promise对象,我们传入的callback将会被Promise对象所执行
    * Promise会维护一个任务状态,这个状态是一个Promise内部的属性
    *   [[PromiseStatus]]
    *       该属性一共有三个值
    *       1. pending : 正在处理,Promise对象一旦被创建就会更改为该状态,他是默认值
    *       2. resolved : 处理完成
    *       3. rejected : 处理失败
    *           resolved,rejected这两个状态是需要靠我们手动去维护的。因为异步任务的结果是成功还是失败,是由我们的具体业务所决定的,Promise对象是没有办法确定的。      我们需要在我们业务处理中,去根据实际情况改变Promise对象的状态
    *  改变Promise状态
    *   当我们把一个callback函数传递给Promise对象的时候,Promise对象会去执行该callback函数,同时,还会传递两个参数给这个callback,所以,我们可以在callback函数接收这两个参数
    *   这两个参数都是一个函数
    *       resolve
    *           当我们调用该函数的时候,会把当前的Promise对象的状态改成resolved
    *       reject
    *           当我们调用该函数的时候,会把当前的Promise对象的状态改成rejected
    *
    * Promise对象还有一个方法:then
    *   该方法接收两个参数,这两个参数都是callback函数,这两个callback不会立即执行,当Promise的状态一旦发生改变就会执行then方法中传入的函数,有点类似事件绑定
    *   当Promise状态变成resolved,那么执行then的第一个参数callback
    *   当Promise状态变成rejected,那么执行then的第二个参数callback

    举列:现在我们有一个延时定时器setTimeout 如下
        var a=10;
        setTimeout(()=>{
            a+=10;
        },1000);
        console.log(a);//此时a打印出来为10 因为在js为异步非阻塞的语言 在延时定时器中的函数还没有执行的时候下面的console.log就已经执行完毕所以打印出来为10 。
        那么我们想得到延时定时器处理后的值可以这么做。
        var a=10;
        var p1=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                a+=10;
                resolve(err)//处理完成
            },1000);//只有当处理完成之后才会执行then中的函数 此时resolve()中的东西为then的传参。
        })
        p1.then(()=>{
            console.log(a)
        });
        此时打印出来的就是20.

列2 promise

then方法如何传递数据
    *   我们可以通过resolve,reject方法来传递数据
    *   我们只要在调用上面两个函数的时候,把需要传递给后续的then方法的数据作为其参数就可以
    * catch也是类似catch方法就是捕获在promise的then中又传递了promise这样多个嵌套的话 拿 then 的 方法来监听太过繁琐 catch 监听 主要有一个执行错误就会被catch捕获从而执行catch中的函数
    * */
    new Promise((resolve, reject) => {

        let b = 10;

        setTimeout(() => {
            b += 10;
            resolve(b);
    //                reject(‘第一个任务出错了‘);
        }, 1000);

    }).then(function(b) {
        console.log(b);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                b *= 2;
                resolve(b);
    //                    reject(‘第二个任务出错了‘);
            }, 1000);
        });
    }).then(function(b) {
        console.log(b);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                b *= b;
                resolve(b);
               reject(‘第三个任务出错了‘);
            }, 1000);
        });
    }).then(function(b) {
        console.log(b);
    }).catch(function(err) {
        console.log(err);
    });

promise的all方法

有的时候在一个Promise任务中需要处理多个异步任务,那这多个异步的任务是同时执行的,但是执行时间有是不确定的。后续的任务需要这几个异步任务全部完成以后再执行,那么就需要用到Promise中提供的all方法来实现

 var p1 = new Promise((resolve, reject) => {
        let a = 1;
        setTimeout(() => {
            a++;

// reject(‘one‘); resolve(a); }, Math.random() * 1000); });

var p2 = new Promise((resolve, reject) => {
        let b = 2;
        setTimeout(() => {
            b++;
            resolve(b);
        }, Math.random() * 1000);
    });

    /*
    * 把两个不同的异步任务分别包装在一个Promise对象中,然后调用Promise对象静态方法all,把上面多个不同异步Promise作为数组传递给all方法的参数
    * 这个时候Promise.all方法中会维护一个状态,这个状态是根据传入的多个异步任务的状态共同决定的
    * 当多个异步任务的状态都变成了resolved,那么all的状态才是resolved,但是只要有一个异步任务的状态变成了rejected,那么all的状态就会变成rejected
    * */
    p1 p2 是两个promise 在下面的方法中只有当p1 p2 都为resolved的时候才会执行下面的函数方法
    Promise.all([p1, p2]).then(([a, b]) => {
        console.log(a, b);
    }).catch((err) => {
        console.log(err);
    })

promise 的另一种方法 await async

await async 是es7 定义的新标准

    通过 async 声明一个异步函数在该函数中 

    async function(){

        await fn1 //这个fn1 代表一个函数

        await fn2//这样的话在fn1 执行完成之后才会执行fn2

    }
时间: 2024-11-08 22:03:45

promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解的相关文章

使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我们来一起看一段代码: // 作为对象方法调用 var test = { a : 5, b : 6, sum : function () { return this.a + this.b; // 此处this = test } } alert(test.sum()); // 11 作为对象调用时thi

Jquery中的异步编程浅析 延期(deferred)的承诺(promise)

引子 相信各位developers对js中的异步概念不会陌生,异步操作后的逻辑由回调函数来执行,回调函数(callback function)顾名思义就是"回头调用的函数",函数体事先已定义好,在未来的某个时候由某个事件触发调用,而这个时机,是程序本身无法控制的. 举几个常见例子: 事件绑定 动画 Ajax 上面的例子简单.典型,易于阅读和理解. 为了引出本文的主题,假设现在有3个ajax异步操作,分别为A.B.C,每个都封装成了函数,并可传入success回调作为参数. 请考虑以下场

JS中的异步以及事件轮询机制

一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步均是通过多线程实现的,没有循环队列一说,直接在子线程中完成相关的操作) JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个

js 中的事件驱动编程

js 中的事件驱动编程,布布扣,bubuko.com

js浮点数精度丢失问题及如何解决js中浮点数计算不精准

js中进行数字计算时候,会出现精度误差的问题.先来看一个实例: console.log(0.1+0.2===0.3);//false console.log(0.1+0.1===0.2);//true 上面第一个的输出会超出我们的常识,正常应该为true,这里为什么会是false呢,直接运行会发现0.1+0.2在js中计算的结果是: console.log(0.1+0.2);//输出0.30000000000000004 这对于浮点数的四则运算(加减乘除),几乎所有的编程语言都会出现上面类似的精

解决js中post提交数据并且跳转到指定页面的问题总结

今天在开发中过程中遇到了这个问题,js中利用JQuery中的 $.post("url", id, function(){}); 这个方法是数据提交正常,但是后台处理完成之后跳转无法成功.经过分析,后台只是将要跳转的页面的html发回了前台,也就是说前台与后台利用JQuery的post方法只能发生数据的交互,并不能实现页面的跳转.所以,这就导致无法正常跳转. 解决方案: 1.将我们要提交的数据加入到指定的form表单中,在form表单中设置需要跳转的url和方法类型 post或get等

promise核心技术 2.两种回调函数 js中error的处理

抽空详细学习一下什么是回调函数(一个回调函数,也被称为高阶函数) 1.什么样的函数是回调函数 自己定义的(sittimeout不是自己定义的) 没有调用 自己执行 1.同步回调与异步回调函数 同步回调函数 const arr = [1, 2, 3] arr.forEach(item => { console.log(item) }) //同步回调,任务启动后(等待完成),直接执行回调函数,再往下执行 console.log("later") 异步回调函数 setTimeout((

咱们来聊聊JS中的异步,以及如何异步,菜鸟版

为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的. 问题2: 我们通常要解决这样一个问题,如果我们需要在head里面加入script代码的话,一般会将代码写在window.onload里面(如果操作了dom的话),你有没有想过,为什么要加window.on

解决js中window.location.href不工作的问题

E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script   type = "text/javascript" > function   jump () { window . location . href = 'http://wisejenny.blog.163.com/blog/www.baidu.com' ; } function   enjoy () { return   false ; } < /scri