精华内容
下载资源
问答
  • js利用Promise实现同步执行

    千次阅读 2019-11-14 21:28:51
    (function(){ new Promise(function(resolve,reject){ setTimeout(function(){ console.log(1) // resolve() reject() },3000) ...
    (function(){
            new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log(1)
    //                resolve()
                    reject()
                },3000)
            })
            .then(function(){
                console.log(3)
            })
            .catch(function(){
                console.log(4)
            })
        })()
    

    上面的代码会先输出1,在输出4,如果把reject()注释掉,取消resolve()的注释,那么就是先输出1,在输出3.

    (function(){
            new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log(1)
                    resolve()
    //                reject()
                },3000)
            })
    
            .then(function(){
                console.log(3)
                new Promise(function(resolve,reject){
                    setTimeout(function(){
                        console.log(5)
                        reject()
                    },200)
                })
                .then(function(){
                    console.log(6)
                })
                .catch(function(){
                    console.log(7)
                })
            })
            .catch(function(){
                console.log(4)
            })
        })()
    

    上面的例子是嵌套使用

    展开全文
  • 今天的这篇文章主要是总结promise对象如何实现同步处理异步任务: 我从头开始慢慢介绍这个过程吧!这个过程我会用代码一一实现,毕竟文字不如 代码来得合适。 promise的三种状态 //pending 准备阶段 //fulfilled ...

    今天的这篇文章主要是总结promise对象如何实现同步处理异步任务:

    我从头开始慢慢介绍这个过程吧!这个过程我会用代码一一实现,毕竟文字不如 代码来得合适。

    promise的三种状态

    //pending 准备阶段
    //fulfilled 成功
    //rejected  失败
    function promise() {
        return new Promise((resolve, reject) => {
            resolve("成功");
            // reject("失败");
        })
    }
    console.log(promise()); //Promise {<pending>} 没调用微任务之前
    // console.log(promise()); // Promise {<fulfilled>: "成功"} 调用resolve
    // console.log(promise()); //Promise {<rejected>: "失败"} 调用reject
    

    Promise对象的任务进行抛出(一般我们就定义reslove成功reject失败)并通过thencatch关键字进行处理:

    //可以将任务处理模块(resolve或reject)多次抛出
    //以then或者catch结束(必须有处理模块,放一个空的then是无效的)来获取这个结果并会结束此次任务
    let p1 = new Promise((resolve, reject) => {
        // resolve("成功");
        reject("失败")
    })
    new Promise((resolve, reject) => {
        resolve(p1)
    }).then(
        value => {
            console.log(value);
        },
        reason => {
            console.log("error" + reason);
        }
    ).catch(error => {
        console.log(error); //这里不能再次获取失败内容,因为在上面已获取了一次了
    })
    

    我们要记住默认情况下.then返回的promise对象抛出的是成功状态

    let p1 = new Promise((resolve, reject) => {
        // resolve("fulfilled");
        reject("reject");
    });
    //可以通过一个变量存储p1这个promise对象
    let p2 = p1
    .then(
        value => console.log("成功" + value),
        error => console.log("失败" + error)
    )
    .then(
        //会输出 但不会得到a值,它是undefined,因为在上面已经接受了
        a => console.log("最后的成功" + a), //最后的成功undefined
        //不会执行,默认情况下.then返回的是成功的,只会打印resolve语句
        b => console.log("最后的失败" + b)
    ).then(
        //依旧会执行 a此时为undefined
        a => console.log("11" + a) //11undefined
    )
    

    总之一句话,.then就是对返回的前一个promise对象进行处理,默认.then返回的是成功的promise对象

    let p1 = new Promise((resolve, reject) => {
       resolve("第一次成功");
    });
    p1.then(
        // value => 123, //这里可以是一个返回值,让下一个then去处理这个值
        //当然这里也可以嵌套一个promise对象
        value => {
            console.log(value); //接受第一次成功
            return new Promise((resolve, reject) => {
                resolve("第二次成功")
            })
        },
        error => console.log(error) //不会输出 没有错误reject抛出
    ).then(
        //通过这样来处理前面的返回值
        //实现了嵌套promise对象的模块
        res => console.log("拿到前面的返回值" + res), //拿到前面的返回值第二次成功
        err => console.log(err) //对前面返回值中抛出错误处理
    )
    

    好了我们可以稍稍深入一点点了,我们从上面的代码也能看出,异步任务是可以通过Promise对象去使之变成同步任务的,我们可以把这些同步任务称为队列,下面的代码或许更加明朗一些:

    let promise = Promise.resolve("123"); //下面有介绍哦
    promise = promise.then(
        value => {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log(value);
                    resolve("ab")
                }, 1000);
            })
    
        }
    );
    //实际得到就是上一个promise返回值赋值给一个变量罢了 跟直接用then差不多的
    promise.then(
        v => {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log(v);
                    resolve("ab")
                }, 1000);
            })
        }
    )
    

    上述Promise.resolve("123");实际上就是以下代码的简写了,可以试试看,得出来的结果是一样的:

    new Promise(resolve => {
    	reslove("123");
    }.then(
    	res => console.log(res);  //"123"
    )
    
    Promise.resolve("123").then(res => console.log(res)) //"123"
    

    这里的原理要理解清楚,下面就是对其的拓展了;

    ----------------数组实现队列(相当于同步任务,依次执行)
    其实这也是一个异步任务:
    数组map方式实现:

    let arr = [1, 2, 3, 4, 5];
    //封装成函数 map方式 封装队列
    function queue(arr) {
        let promise = Promise.resolve();
        //循环给promise赋值,使其同步输出
        arr.map(v => {
            promise = promise.then(_ => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        console.log(v); //这里会依次去打印1,2,3,4,5每次间隔时间为1秒
                        resolve();
                    }, 1000)
                })
            }
            )
        })
    }
    queue(arr);
    

    这样写的话,我们大大减少了之前用链式then依次输出的代码量,而且我感觉这样的代码看起来还是有点牛皮哈! 哈哈

    reduce实现队列:其核心跟map是差不多的,需要了解这种方法的使用,不清楚的伙伴可以去看数组的八种遍历方式

    //使用reduce 封装队列
    let arr = [1, 2, 3, 4, 5];
    arr.reduce((promise, n) => {
        return promise.then(_ => {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log(n); //这里也会依次去打印1,2,3,4,5每次间隔时间为1秒
                    resolve()
                }, 1000)
            })
        })
    }, Promise.resolve())
    

    好了,文章就到此结束了,这个也是偶然看视频获得一些总结,希望大家多多支持啊!!!

    展开全文
  • Promise对象同步实现

    2019-09-24 09:04:02
    多个Promise 实现同步的方法 示例 let pro1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') },1000) }) let p2 = new Promise((resolve, reject) => { setTimeout(() =...

    多个Promise 实现同步的方法

    示例

    let pro1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      },1000)
    })
    
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('failed')
      }, 500)
    })
    
    Promise.race([p1, p2]).then((result) => {
      console.log(result)
    }).catch((error) => {
      console.log(error)  // 打开的是 'failed'
    })
    
    
    展开全文
  • js代码-Promise同步实现
  • 1.axios的同步请求 注:我的代码是在vue 中的。 步骤一 先写一个用axios请求的方法在methods中,并将其用return返回。 我这里请求的是本地静态文件,网络请求亦同理。 Test() { return this.axios({ url: '/test...

    1.axios的同步请求

    注:我的代码是在vue 中的。

    • 步骤一
      先写一个用axios请求的方法在methods中,并将其用return返回。
      我这里请求的是本地静态文件,网络请求亦同理。
    Test() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
           		console.log('这是Test方法')
          })
        }
    
    • 步骤二

    调用Test()方法。

    this.Test().then(
          res => {
            console.log('进到res')
          },
          rej => {
            console.log('进到rej')
          }
        )
    

    这样执行过后,控制台会打印:
    在这里插入图片描述
    我们注意到了,他是进入了res这个代码块里,那么如何进入rej这个代码块呢?

    • 步骤三
      进入rej代码块,需要对步骤一中的Test()方法进行改动:
    Test() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
            console.log('这是Test方法')
            return new Promise.reject('错误')
          })
        }
    

    是的,在console.log下面增加了一行代码,再来看看打印结果吧!
    在这里插入图片描述

    打印出来的就是rej而不是res了。

    • 步骤四
      那么,怎么去同步发请求呢?其实经过上面三步,你应该已经学会了。这里汇总一下:
    Test() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
            console.log('这是Test方法')
          })
        }
     Test1() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
            console.log('这是Test1方法')
          })
        }
     //依次发送Test、Test1请求
     this.Test().then(res => {
     	this.Test1()
    },rej => {
    	// 发生错误也发送请求
    	this.Test1()
    })
    
    • 补充
      如果想将第一个请求的返回数据传递到第二个请求内,可以这么做:
      1.如果想走res,那么直接return返回的数据就好了:
    Test() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
            console.log('这是Test方法')
            return res
          })
        }
    

    2.如果想走rej,那么得在之前的reject括号里加上返回的数据:

    Test() {
          return this.axios({
            url: '/test.json',
            method: 'get'
          }).then((res) => {
            console.log('这是Test方法')
            return Promise.reject(res)
          })
        }
    

    返回之后,数据就可以在步骤二中的res或者rej获得了。

    2.Promise同步

    其实本质跟网络请求没有太大区别啦。

    • 步骤一:
      同样先写一个Test方法:
    Test() {
          return new Promise((resolve, reject) => {
             	console.log('测试')
          })
        }
    
    • 步骤二
      如果是想走res过,就这么写:
    Test() {
          return new Promise((resolve, reject) => {
             	console.log('测试')
             	resolve('测试res')
          })
        }
    

    如果是想走rej过,就这么写:

    Test() {
          return new Promise((resolve, reject) => {
             	console.log('测试')
             	reject('测试rej')
          })
        }
    

    最后还是一样,去调用这个方法:

    this.Test().then(
          res => {
            console.log('进到res',res)
          },
          rej => {
            console.log('进到rej',rej)
          }
        )
    

    注:这是楼主通过资料与借鉴摸索出来的,不一定是好的写法哦!

    展开全文
  • Promise 实现小程序同步请求

    千次阅读 2018-03-12 13:51:00
    var Promise = require('bluebird.js') //我用了bluebird.js 文件地址 https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js function wxPromisify(fn) { return function (obj = {}) { return new ...
  • Js Promise实现异步代码同步执行2

    千次阅读 2018-11-03 17:12:38
    Js Promise实现异步代码同步执行2   /**  * Created by kikop on 2018/11/3.  */   $(function () {      execAsyncMethod().then(  execTerminalMethodOnAsyncSucc,  ...
  • mounted(){ this.controller(); } async controller () { try{ await this.a(); await this.b(); }.catch(e){ console.log(e);... return new Promise((resolve, ... return new Promise((resolve, reject) =>
  • Promise 解决同步请求问题
  • ajax请求异步和同步的差别一、ajax异步(默认async:true)异步:并行处理,程序向服务器发送一个请求,在结果返回之前,程序还是可以执行其它操作(以前台界面为例,用户依然可以输入其它信息,并且和服务器进行其它...
  • function doubleAfter2seconds(num) { return new Promise((resolve, reject) =&gt; { setTimeout(() =&gt; { resolve(2 * num) }, 200); } ) } ...
  • nodejs实现时,我习惯使用async模块的eachSeries方法,依次对数组中item操作,数据全部处理完毕之后继续下面的业务;随便链个async模块使用教程地址:https://blog.csdn.net/limite_god/article/details/41486901 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,545
精华内容 11,418
关键字:

promise实现同步