js中的promise使用

 1 // 0.5秒后返回input*input的计算结果:
 2 function multiply(input) {
 3     return new Promise(function (resolve, reject) {
 4         log(‘calculating ‘ + input + ‘ x ‘ + input + ‘...‘);
 5         setTimeout(resolve, 500, input * input);
 6     });
 7 }
 8
 9 // 0.5秒后返回input+input的计算结果:
10 function add(input) {
11     return new Promise(function (resolve, reject) {
12         log(‘calculating ‘ + input + ‘ + ‘ + input + ‘...‘);
13         setTimeout(resolve, 500, input + input);
14     });
15 }
16
17 var p = new Promise(function (resolve, reject) {
18     log(‘start new Promise...‘);
19     resolve(123);
20 });
21
22 p.then(multiply)
23  .then(add)
24  .then(multiply)
25  .then(add)
26  .then(function (result) {
27     log(‘Got value: ‘ + result);
28 });

运行结果:

start new Promise...

calculating 123 x 123...

calculating 15129 + 15129...

calculating 30258 x 30258...

calculating 915546564 + 915546564...

Got value: 1831093128

代码的解析: resolve 是执行成功

      reject 是执行失败

      prototype.then()  递延处理

      prototype.catch()  异常捕捉

      使用setTimeout 模拟异步

以上代码每一步then都会执行函数中的setTimeout(resolve, 500, input * input), 第一个参数标签这是成功状态执行的函数, 第二参数延时500毫秒,第三参数传递给下一个函数的值。

 1 ‘use strict‘;
 2
 3 // ajax函数将返回Promise对象:
 4 function ajax(method, url, data) {
 5     var request = new XMLHttpRequest();
 6     return new Promise(function (resolve, reject) {
 7         request.onreadystatechange = function () {
 8             if (request.readyState === 4) {
 9                 if (request.status === 200) {
10                     resolve(request.responseText);
11                 } else {
12                     reject(request.status);
13                 }
14             }
15         };
16         request.open(method, url);
17         request.send(data);
18     });
19 }
20
21 var log = document.getElementById(‘test-promise-ajax-result‘);
22 var p = ajax(‘GET‘, ‘/api/categories‘);
23 p.then(function (text) { // 如果AJAX成功,获得响应内容
24     25     console.log(text);
26 },function (status) { // 如果AJAX失败,获得响应代码
27     console.log(‘ERROR: ‘ + status);
28 });

以上代码吧AJAX异步执行函数转换为promise对象。

原文地址:https://www.cnblogs.com/jiayiming/p/9099655.html

时间: 2024-11-25 18:40:18

js中的promise使用的相关文章

说说Q.js中的promise的历史

转载自:http://segmentfault.com/a/1190000002591145 Promise核心说明 promise的规范,请百度搜索Prommise/A+规范,promise的核心是有个then方法.在相关术语中,promise指的就是有个 then 方法,且该方法能触发特定行为的对象或函数. 起步:用这一种方法理解Promise 回想一下Promise解决的是什么问题?回调. 例如:函数 doMission1() 代表第一件事情,现在,我们想要在这事情完成后,再做下 一件事情

js中的promise

转载自: http://www.cnblogs.com/1000/p/getting-started-with-promises.html JavaScript有很多槽点,嵌套回调怕是千夫所指. 很久之前,我一直使用async来处理JavaScript异步编程中的嵌套回调问题.当然我也大概的了解过一些其它旨在解决这些问题的类库,诸如EventProxy.Jscex.StepJS.thenjs. 当我第一次看到Promises规范的时候,我根本无法理解它所带来的好处.譬如每个初次学习Promise

js中的Promise简单总结(ES6)

例如: 使用回调函数的写法: 使用Promise对象之后的写法: Promise的作用:把回调函数写法分离出来,在异步操作执行完后,用链式调用的方法执行回调函数,对于多层回调来说,非常的方便. 再看如下例子: 此时控制台会输出 'aa'  这个结果 此时控制台还是只有 'aa'  这个结果 此时控制台就会有  'aa'  和  'bb'   这两个结果. 也就是说把回到函数写在 then里面,进行链式调用,分离开来.代码看起来更加清晰. 未完,待总结. 原文地址:http://blog.51ct

大话JS神器之Promise

前段时间的工作中,由于项目要在前端实现存储,于是便使用了websql,而websql的API涉及到了很多的异步问题,如果采取回调函数的方式处理,代码不够优雅,而且不利于理解,于是便找到了Promise,使用之后有一些自己的理解和心得,跟大家在本文中一起分享一下. Promise为何物? Promise中文释义为"誓言"."承诺"之意,根据其音译,那就是"普罗米修斯",这货很强大啊,在希腊神话中,是最具智慧的神明之一,最早的泰坦巨神后代,名字有&q

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

* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的通知机制. 异步:当事情处理完成后被请求者会发信息通知请求者该事情处理完成.在这期间被请求者可以选择是继续等待命令请求完成还是去做其他事等待被请求者返回. 同步:当事情处理完成后被请求者不会告知请求者,等到请求者发来询问是才会告知 阻塞:非阻塞 指的是请求者 阻塞:针对请求者来说的,委托其他人处理一

Angular JS中 Promise用法

一.Promise形象讲解A promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多.promise全称是 Futures and promises. 而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的.promise解决的是异步编程的问题,对于生活在同步编程世界中的程序员来说,它可能比较难于理解,这也构成了angular入门门槛之一,以下将用

js中回调函数,promise 以及 async/await 的对比用法 对比!!!

在编程项目中,我们常需要用到回调的做法来实现部分功能,那么在js中我们有哪些方法来实现回调的? 方法1:回调函数 首先要定义这个函数,然后才能利用回调函数来调用! login: function (fn) { var app = getApp() wx.login({ success: res => { let code = res.code; wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) {

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

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

彻底理解Javascript 中的 Promise

ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. Promise 对象有以下两个特点. (1)对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和 Rejected(已失败).只有异步操作的结果,可以决定当