JavaScript中 Promise 的使用技巧

“生产代码”是可能需要一些时间来执行的代码。

“消费代码”是必须等待结果的代码。

Promise 是一个 JavaScript 对象，它链接生产代码和消费代码。

看一段最简单的代码：

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

执行 new Promise 的构造函数后，会立即进入 Promise 的构造函数体内，即包含了 resolve 和 reject 方法的匿名函数。

然后执行完毕。此时并不会执行 then 里的回调函数。

然后 then 指定的回调函数被异步调用，注意 Chrome 里的提示：

  • 当 Promise 对象处于 pending（工作）状态时，结果是未定义的。
  • 当 Promise 对象 fulfilled 时，结果是一个值。如下图所示：

  • 当 Promise 对象被 rejected 时，结果是一个错误对象。

开发人员无法访问 Promise 属性状态和结果，必须使用 Promise 方法来处理 Promise。

看一个包含 UI 的例子：

Promise 把异步代码封装起来。上图的 setTimeout，模拟了一个耗时 3 秒的 HTTP 操作。

返回的 myPromise 对象，使用 then 注册回调函数。回调函数不关心自己什么时候被调用。

运行显示：

3 秒后：

一个文件访问的例子：

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

函数体内一般是一个比较费时的操作，操作本身会立即执行，但什么时候执行结束？这就是一个异步操作了。执行结束后，通过 resolve 通知 then 注册的回调函数。

到此这篇关于JavaScript  Promise 的使用技巧的文章就介绍到这了,更多相关JavaScript Promise 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS异步编程Promise对象详解

    1.单线程模型 单线程模型指的是,JavaScript 只在一个线程上运行.也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待.注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程.事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合. JavaScript 之所以采用单线程,而不是多线程,跟历史有关系.JavaScript 从诞生起就是单线程,原因是不想让浏览器

  • Javascript的promise,async和await的区别详解

    终于把promise, async, await的区别和联系弄清楚了,看下面代码 写法1,2是promise的写法 写法6是async和await的写法 主要看第2种写法和第6中写法即可, 第2种写法是promise的典型写法,第6中写法是async, await的典型写法 // 以下三个请求依次执行 req1 = () => { return fetch("http://example.com/api/v1/get")} req2 = () => { return fet

  • JavaScript中Promise的执行顺序详解

    JavaScript中Promise的执行顺序详解

    目录 前言 代码分析 then 方法何时调用? 总结 前言 最近看到一个 Promise 相关的很有意思的代码: new Promise((resolve) => { console.log(1) resolve() }).then(() => { new Promise((resolve) => { console.log(2) resolve() }).then(() => { console.log(4) }) }).then(() => { console.log(3

  • JS Promise axios 请求结果后面的.then() 是什么意思

    JS Promise axios 请求结果后面的.then() 是什么意思

    目录 Promise 对象 Promise 对象的状态 回调函数 Promise.then() 绑定回调函数 使用 Promise:链式调用 链式调用的实现 错误处理 常见错误 创建 Promise 对象 Promise 其他静态方法 创建已决议的 Promise 对象 多个 Promise 对象 结语&参考文献 Promise 是JS中一种处理异步操作的机制,在现在的前端代码中使用频率很高.Promise 这个词可能有点眼生,但你肯定见过 axios.get(...).then(res =>

  • 万字详解JavaScript手写一个Promise

    万字详解JavaScript手写一个Promise

    目录 前言 Promise核心原理实现 Promise的使用分析 MyPromise的实现 在Promise中加入异步操作 实现then方法的多次调用 实现then的链式调用 then方法链式调用识别Promise对象自返回 捕获错误及 then 链式调用其他状态代码补充 捕获执行器错误 捕获then中的报错 错误与异步状态的链式调用 将then方法的参数变成可选参数 Promise.all方法的实现 Promise.resolve方法的实现 finally方法的实现 catch方法的实现 完整

  • javascript中的糖衣语法Promise对象详解

    目录 一.Promise的诞生 1.回调地狱 二.Promise的行为 1.Promise的语法 2.Promise的方法 (1)Promise.prototype.then() (2)Promise.prototype.catch() (3)Promise.prototype.finally() (4)Promise.resolve() (5)Promise.reject() (6)Promise.all() (7)Promise.race() 三.Promise的场景 1.Ajax请求 2.

  • JavaScript详解使用Promise处理回调地狱与async await修饰符

    目录 Promise 回调地狱 Promise简介 Promise简单使用 async和await 修饰符 小结 Promise Promise能够处理异步程序. 回调地狱 JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序来执行,那么就需要将这些异步操作嵌套起来,嵌套的层数特别多,就会形成回调地狱 或者叫做 横向金字塔. 案例:有a.txt.b.txt.c.txt三个文件,使用fs模板按照顺序来读取里面的内容,代码:

  • javascript中Promise使用详解

    目录 一.首先,要知道为什么要用Promise语法? 二.接着,来了解一下回调地狱(Callback Hell) 三.最后,也是本章的重头戏,Promise的基本使用 (一) resolve函数 (二) rejected函数 (三)Promise的API 1. then 2. catch 3. finally 4. Promise.all 5. Promise.race 四.最后 前言: 做过前端开发的都知道,JavaScript是单线程语言,浏览器只分配给JS一个主线程,用来执行任务,但是每次

  • JS promise 的回调和 setTimeout 的回调到底谁先执行

    JS promise 的回调和 setTimeout 的回调到底谁先执行

    目录 任务 VS 微任务 执行过程 案例分析 结语 & 参考资料 首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么? console.log("script start"); setTimeout(function () { console.log("setTimeout1"); }, 0); new Promise((resolve, reject) => { setTimeout(function () { console.log(&

  • JavaScript中 Promise 的使用技巧

    JavaScript中 Promise 的使用技巧

    “生产代码”是可能需要一些时间来执行的代码. “消费代码”是必须等待结果的代码. Promise 是一个 JavaScript 对象,它链接生产代码和消费代码. 看一段最简单的代码: let myPromise = new Promise(function(myResolve, myReject) { // "Producing Code" (May take some time) myResolve(); // when successful myReject(); // when

  • JavaScript中数组常见操作技巧

    JavaScript中数组常见操作技巧

    效果图如下所示: Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组 // good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['广州', 50] ]; // bad var arr = new Object()

  • 理解JavaScript中Promise的使用

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验.于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题.本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解. 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的

  • JavaScript中Promise的使用方法实例

    JavaScript中Promise的使用方法实例

    目录 前言 Promise简介 什么是回调地狱? Promise的特点 创建Promise实例 then方法 resolve 和 reject 的参数传递 then()链式调用 then()的返回值 catch方法 finally方法 Promise的方法 Promise.resolve() Promise.reject() Promise.all() Promise.allSettled() Promise.race() async 和 await async函数函数 await 异步函数的错

  • JavaScript中Promise处理异步的并行与串行

    目录 一.异步的“并行” 并行中的综合处理 二.异步的“串行”: 2.1 then链机制处理 2.2 真实项目中,想实现异步的串行,我们一般使用async+await 2.3 promise.then(onfulfilled,onrejected) 在内存中的执行 三.aysnc修饰符 四.await:等待 await中的异步 五.思考题 思考题1 思路及图解 思考题2 思路及图解 思考题3 思路及图解 总结 一.异步的“并行” 同时处理,相互之间没啥依赖 // 执行FN1返回一个promise

  • 浅谈JavaScript中promise的使用

    浅谈JavaScript中promise的使用

    阅读目录 什么是Prmoise Promise的使用 最近在看<你不知道的javascript中卷>,发觉作者花了基本一半的篇幅去讲异步和promise,觉得有必要总结一下. 其实本文的目的是想手写一个Promise的,无奈总结着总结着发觉篇幅有点长,因此只好一分为二,先介绍promise的用法,知道怎么用,我们才知道怎么写,所以把手写一个promise的任务放到了下一篇文章当中. 当然,网上有很多关于promise的文章,都可以参考参考,有误之处,欢迎之处. 什么是Prmoise promi

  • 关于javascript中的parseInt使用技巧

    要对表单中填写的日期格式进行客户端验证,于是在网上找了段代码,其中用到parseInt对年月日做判断,其中有类似这样的语句: ...... else if(parseInt(month)<1 || parseInt(month) >12) ...... 可是对于当前本来正确的日期,这里怎么也通不过.后来一查才明白,parseInt实际上有两个参数,第一个是要转换的值,第二个是指定的进制.如果不指定第二个参数,那么它只能正确地转换01到07(即把它们转换成1到7),从08开始,它就会按照&quo

  • 举例详解JavaScript中Promise的使用

    摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成有可能没完成.Promise模式唯一需要的一个接口是调用then方法,它可以用来注册当promise完成或者失败时调用的回调函数,这在Common

随机推荐