精华内容
下载资源
问答
  • 微信promise 同步执行

    万次阅读 2018-09-10 09:19:02
    一般我们在开发web项目的时候都是同步执行的,也就是执行完一个函数接下去才会执行下一个函数。 但最近我在开发微信小程序和小游戏的发现微信为了更好的用户体验,所以都是异步的, 这样就会对我们的开发照成一定的...

    一般我们在开发web项目的时候都是同步执行的,也就是执行完一个函数接下去才会执行下一个函数。

    但最近我在开发微信小程序和小游戏的发现微信为了更好的用户体验,所以都是异步的, 这样就会对我们的开发照成一定的困难。

    例如一些当用户登陆后获得code去后端换取相应的令牌,但是如果是异步的话,就可能会执行其他需要到这个令牌的函数再执行去获取令牌,那也就会照成一些函数的过滤,也就是数据的丢失。所以在解决这个问题上我也查阅过一些资料,因为一开始开发紧张和对令牌的要求不是很大,所以就没太注意,后来发现不行了发现个简单代替的缓存异步阻塞,想简单的阻塞一下看下会不会改变调用顺序上的问题,最后还是发现这是不可行的,所以就只能用网上最常用用promise组件来做到同步的效果。

    首先我们需要将promise组件下载,然后引入

    1:到bluebirdjs官网bluebirdjs下载对应的bluebird.min.js然后将其引入,我是将此js改为promise.js。

    var Promise = require('./promise.js')

    使用以上语句将其引入

    2.将需要request的函数加上对应的promise方法

    getToken(){
        return new Promise(function (resolve, reject) {
          wx.request({
           url: 'xxx',//请求地址
           data: {//发送给后台的数据
            },
           header: {//请求头
             "Content-Type": "application/x-www-form-urlencoded"
           },
           method: "POST",//get为默认方法/POST
           success: function (res) {
              resolve(res.data);//将结果往上抛
            },
           fail: function (err) { },//请求失败
           complete: function () { }//请求完成后执行的函数
        })
        }
    }

    以上为简单的request方式,这里用户可以加上缓存wx.getStorageInfoSync同步获取到缓存有就不需要request了,只需要注意还是用resolve(data);的方式将缓存的东西和request的东西保持一致往上抛返回给调用的方法。

    3.调用步骤2的函数

    let _this = this;
     _this.getToken().then(function (res) {
        //res就是步骤2中的resolve的值
        //将其值获取后再进行相应的逻辑即可。
    })

    以上即是promise的简单调用,可能项目需要的深度不是很深,就没继续深究下去,不过大部分小程序或者小游戏的场景都可以直接使用了。

    展开全文
  • Promise,异步问题同步化解决方案,Promise包裹异步程序,通过.then获取异步程序结果, 并且不阻塞Promise相关的任何程序,和Promise相关的程序保持异步关系,只是顺便解决回调地狱 <!DOCTYPE html> <...

    Promise,异步问题同步化解决方案,Promise包裹异步程序,通过.then获取异步程序结果,
    并且不阻塞Promise相关的任何程序,和Promise相关的程序保持异步关系,只是顺便解决回调地狱

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
        <script>
            // // 同步
            // const p = new Promise((resolve, reject) => { })
    
            // // 异步 
            // p.then((res) => { })
    
    
            // 问题:为什么Promise执行是同步,p.then 是异步
    
    
            // ==============================================
            // // 异步
            // $.ajax({
            //     url: 'http://192.168.2.104:3000/data.json',
            //     success(data) {
            //         console.log(getNames(data));
            //     }
            // });
            // console.log('我是信息1');
    
    
    
            // // 同步
            // var data = $.ajax({
            //     url: 'http://192.168.2.104:3000/data.json',
            //     async: false
            // });
            // console.log('data',data.responseJSON);
            // console.log('我是信息2');
            // 我想先执行我是信息2, 在执行ajax请求
    
    
            // ==============================================
            // Promise,异步问题同步化解决方案,Promise包裹异步程序,通过.then获取异步程序结果,
            // 并且不阻塞Promise相关的任何程序,和Promise相关的程序保持异步关系,只是顺便解决回调地狱
    
            // const p = new Promise((resolve, reject) => {
            //     $.ajax({
            //         url: 'http://localhost:3000/data.json',
            //         success(data) {
            //             resolve(data)
            //         }
            //     })
            // });
            // p.then((res) => {
            //     console.log(getNames(res));
            // });
            // console.log('我是信息3');
            // function getNames(data) {
            //     return data.map(function (item) {
            //         return item.name
            //     })
            // };
    
            // ==============================================
    
            function getData() {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: 'http://localhost:3000/data.json',
                        success(data) {
                            resolve(data)
                        }
                    })
                })
            }
    
            doSth()
    
            async function doSth() {
                const data = await getData();
                console.log(getNames(data));
            }
    
            console.log('666');
    
            function getNames(data) {
                return data.map(function (item) {
                    return item.name
                })
            };
        </script>
    </body>
    
    </html>
    
    展开全文
  • ES6 Promise对象–将异步代码像同步代码那些书写 文章目录ES6 Promise对象--将异步代码像同步代码那些书写简介特点对象的状态不受外界影响一旦状态改变,就不会再变,任何时候都可以得到这个结果优点与缺点优点缺点...

    ES6 Promise对象–将异步代码像同步代码那些书写

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    简介

    从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。通俗来说,Promise是一个容器,里面保存着异步操作的结果。

    特点

    对象的状态不受外界影响

    Promise对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

    只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

    一旦状态改变,就不会再变,任何时候都可以得到这个结果

    Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,并且会一直保持这个结果,这时就称为 resolved(已定型)。

    优点与缺点

    优点

    1、Promise对象可以将异步操作以同步操作的流程表达出来,用同步的方式写异步的代码,避免了层层嵌套的回调函数。

    2、Promise对象提供统一的接口,使得控制异步操作更加容易。

    缺点

    1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。

    2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

    3、第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

    案例

    Promise实例

    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。注意这两个是两个函数。

    const promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    

    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

    reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    Promise执行顺序

    Promise 新建后就会立即执行。

    let promise = new Promise(function(resolve, reject) {
      console.log('11');
      resolve();
    });
    
    promise.then(function() {
      console.log('22');
    });
    
    console.log('33');
    
    // 11
    // 33
    // 22
    

    Promise 新建后立即执行,所以首先输出的是11then方法指定的回调函数属于异步函数,在当前脚本所有同步任务执行完才会执行,所以输出3322最后输出。

    异步加载图片案例

    使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。

    function loadImageAsync(url) {
      return new Promise(function(resolve, reject) {
        const image = new Image();
    
        image.onload = function() {
          resolve(image);
        };
    
        image.onerror = function() {
          reject(new Error('Could not load image at ' + url));
        };
    
        image.src = url;
      });
    }
    
    Promise对象实现的 Ajax

    getTest函数中对 XMLHttpRequest 对象进行了封装,发送一个 HTTP 请求,得到一个Promise对象。

    const getTest = function(url) {
      const promise = new Promise(function(resolve, reject){
        const handler = function() {
          if (this.readyState !== 4) {
            return;
          }
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    
      });
    
      return promise;
    };
    
    
    // 调用案例
    getTest("/test.json").then(function(json) {
      console.log('Contents: ' + json);
    }, function(error) {
      console.error(error);
    });
    

    Promise错误处理

    如果 Promise 状态已经变成resolved,再抛出错误是无效的。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。

    Promise 对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。

    const promise = new Promise(function(resolve, reject) {
      resolve('ok');
      throw new Error('test');
    });
    promise
      .then(function(value) { console.log(value) })
      .catch(function(error) { console.log(error) });
    // ok
    

    感谢

    万能的网络

    阮一峰的es6语法教程

    以及勤劳的自己,个人博客GitHub

    微信公众号

    展开全文
  • JavaScript 网络同步请求 Promise

    千次阅读 2018-01-24 17:46:53
    bluebird.js - 让所有浏览器都支持 ES6 Promise 对象 据说这个用到了DOM对象(未证实),所有要是在没有DOM的环境中跑,可能会报错的,比如:微信小程序。 es6-promise 不用 DOM 对象的。 项目地址:...

    ES6

    原生用法

    非原生实现

    Bluebird

    bluebird.js - 让所有浏览器都支持 ES6 Promise 对象

    据说这个用到了DOM对象(未证实),所有要是在没有DOM的环境中跑,可能会报错的,比如:微信小程序。

    es6-promise

    不用 DOM 对象的。
    项目地址:https://www.npmjs.com/package/es6-promise

    展开全文
  • 异步的区别,promise的使用,javascript的同步 认真打码的怪兽 2021-03-19 07:41:05 40 收藏 文章标签: javascript 版权 1.javascript的同步 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件...
  • Promise(异步与同步

    2021-08-27 19:23:29
    Promise(异步与同步) 一、异步与同步 现实世界中同步与异步操作 软件世界 同步操作 当一个操作开始执行后,主程序需等待它完成,才能继续向下执行 异步操作 当一个操作开始执行后,主程序无需等待它的...
  • java Promise java promise(GitHub)是Promise A+规范的java实现版本。Promise A+是commonJs规范提出的一种异步编程解决方案,比传统的解决方案—回调函数和事件—更合理和更强大。promise实现了Promise A+规范,...
  • promise 对象可以保存某一类型 T 的值,该值可被 future 对象读取(可能在另外一个线程中),因此 promise 也提供了一种线程同步的手段。在 promise 对象构造时可以和一个共享状态(通常是std::future)相关联,并...
  • const promise = new Promise(function(resolve, reject) { resolve('ok'); throw new Error('test'); }); promise .then(function(value) { console.log(value) }) .catch(function(error) { console
  • Promise

    2019-04-02 00:44:04
    Promise 同步&异步 JavaScript的执行环境是单线程。 单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会阻塞其他任务。这个...
  • Promise详解

    2019-09-23 18:46:30
    只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型),然后执行相应缓存队列中的任务 promise实例,每个实例都有一个then方法,这个方法传递两个参数,一个是成功...
  • promise简介

    千次阅读 2018-04-17 08:35:22
    一、 什么是Promise在《你不知道的JavaScript中》有个场景介绍得很形象: 我走到快餐店的柜台,点了一个芝士汉堡。我交给收银员1.47美元。通过下订单并付款,我已经发出了一个对某个值(就是那个汉堡)的请求。我...
  • Promise源码分析(附带Promise的正确打开方式)

    千次阅读 多人点赞 2020-07-05 14:46:25
    你还在被大佬按在地上摩擦吗?我教你Promise底层原理,让你感受一下完虐大佬的感觉。fell 倍儿爽!
  • Promise 主要内容 Promise 的含义 特点 作用 缺点 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.finally() Promise.all() Promise.race() Promise.allSettled() Promise.any() ...
  • 主要问题就是控制Promise的状态 ...那么只需要保持Promise为pending状态就好 DEMO1 使得第一个Promise处于pending状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
  • ES6之Promise用法详解

    2021-01-17 15:26:31
    一 前言本文主要对ES6的Promise进行一些入门级的介绍。要想学习一个知识点,肯定是从三个方面出发,what、why、how。下面就跟着我一步步学习吧~二 什么是Promise首先是what。那么什么是Promise呢?以下是MDN对...
  • Promise源码解密-Promise A+标准

    千次阅读 多人点赞 2021-01-18 15:26:41
    1. Promise promise 是一个拥有 then 方法的 object 或 function ,其行为符合本规范 2. thenable 是一个定义了 then 方法的 object 或 function 3. 值(value) 指任何 JavaScript 的合法值(包括 undefined , ...
  • }) Promise的细节 未决阶段的处理函数是同步的, 会立即执行 const promise = new Promise((resolve, reject) => { console.log('helloworld, 我是未决阶段的处理函数'); /* 这个函数是同步的会立即执行 */ }) ...
  • promise

    2016-10-24 22:24:13
    下面关于promise的说法中,错误的是()正确答案: D 你的答案: C (错误)resolve()和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状态时传递过去的参数,可以在完成回调的参数中得到...
  • 一、promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态: pending: 初始状态,不是...
  • 同步:百度的名词解释是:同步指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系。 例如:你去饭店去吃饭。当你叫服务员点餐时,服务员正在别的桌服务,这时你要等待服务员,把别人的事情处理完成...
  • promise对象

    2018-07-07 16:25:50
    1.promise含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从...
  • 使用ES5手动实现ES6中的Promise APIPromise 对象是... 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。pending 状态的 Promise 对象可能触发fu...
  • Promise机制

    千次阅读 2017-06-25 10:40:29
    同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范,用于解决回调...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,146
精华内容 3,658
关键字:

promise怎么保持同步