一、   promise
1、如何让异步操作有顺序的执行？
方法1：嵌套
ajax1（ajax2（ajax3（...）））
方法2：异步改成同步
open(“GET/POST”,url,false)
缺点：如果后台出现问题，一直忙，不能返回数据，浏览器将出现卡死的情况。
方法3：promise
new Promise(ajax1).then(ajax2).catch()
优点：使用了链式调用代替了嵌套结构。

2、promise写法
使用promise的写法如下：
1.方法1
new Promise(function(resolve,reject){
ajax1({
url:”xxxx”,
success:function(data){
resolve();  //成功回调的执行。
},
error:function(msg){
reject();     //失败回调的执行
}
});
}).then(function(){
ajax2({
url:”xxxx”,
success:function(data){
}
});
}).catch(function(){
console.log(“请求出现错误：”,msg);
});
2.方法2
new Promise(ajax1).then( function(){return new Promise(ajax2)} ).then(ajax3);
3.方法3
new Promise( ajax1 ).then( function(){ return new Promise(ajax2) } ),
then( function(){ return new Promise(ajax3) } ),
then( ajax4 );
4.promise.all 和 promise.race
new Promise(function(resolve,reject){   //p1
ajax1({
……
resolve()
});
}).then(function(){
return new Promise(resolve,reject){  //p2
ajax2({
……
resolve();
});
}
}).then(function(){
return new Promise(resolve,reject){  //p3
ajax3({
……
resovle()
});
}
})
(1)如果有三个ajax请求，调用顺序无关，但必须保证三个都成功，才能开始第四个？
Promise.all(function(){  //p123
return [p1,p2,p3];
}).then(function(){
return p4;
});
(2)如果有三个ajax请求，只要任意一个成功，则开始第四个?
Promise.race(function(){
return [p1,p2,p3];
}).then(function(){
return p4;
});

- 扩展案例
var val = 1;
// 我们假设step1, step2, step3都是ajax调用后端或者是在Node.js上查询数据库的异步操作
// 每个步骤都有对应的失败和成功处理回调
// 需求是这样，step1、step2、step3必须按顺序执行
function step1(resolve, reject) {
console.log('步骤一：执行');
if (val >= 1) {
resolve('Hello I am No.1');
} else if (val === 0) {
reject(val);
}
}
function step2(resolve, reject) {
console.log('步骤二：执行');
if (val === 1) {
resolve('Hello I am No.2');
} else if (val === 0) {
reject(val);
}
}
function step3(resolve, reject) {
console.log('步骤三：执行');
if (val === 1) {
resolve('Hello I am No.3');
} else if (val === 0) {
reject(val);
}
}
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
}).then(function(val){
console.log(val);
return val;
});
// 执行之后将会打印
步骤一：执行
Hello I am No.1
步骤二：执行
Hello I am No.2
步骤三：执行
Hello I am No.3
Hello I am No.3

转载于:https://www.cnblogs.com/wangjizhi/p/6722838.html

一、 promise相关推荐

  1. setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）

    本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...

  2. C++多线程：异步操作std::async和std::promise

    文章目录 std::async 简介 使用案例 std::promise 简介 成员函数 总结 之前的文章中提到了C++多线程中的异步操作机制 C++ 多线程:future 异步访问类(线程之间安全便 ...

  3. ES6中的Promise详解

    Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...

  4. 关于ES6中Promise的应用-顺序合并Promise，并将返回结果以数组的形式输出

    1.Promise 基础知识梳理 创建一个Promise实例 const promise = new Promise(function(resolve, reject) {if (success){r ...

  5. promise实现多个请求并行串行执行

    早上查资料,偶然发现这个话题,发现自己并不会,于是乎,下来研究了一下. 想想之前我们用jquery写请求的时候,要实现请求的串行执行,我们可能是这么做的. $.ajax({url: '',data: ...

  6. 异步编程之Promise(2)：探究原理

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  7. 自己动手写cpu pdf_自己动手写 Promise

    这段时间在学习Promise,但始终不得要领.为了更好地理解Promise,我决定自己实现一个简易版的Promise,以学习Promise工作原理.该工程名为ToyPromise,仓库地址如下: ht ...

  8. promise 和 async await区别

     什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. as ...

  9. Promise - js异步控制神器

    微信小程序开发交流qq群   581478349    承接微信小程序开发.扫码加微信. 正文: 首先给来一个简单的demo看看Promise是怎么使用的: <!DOCTYPE html> ...

  10. Promise的实例用法

    设定函数 function chiFan() {return new Promise(function(resolve, reject) {console.log("chiFan" ...

最新文章

  1. struts 2中为什么抽象包不能包含action？
  2. AFNetworking 3.0 源码解读（十）之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking...
  3. python time
  4. SAP CRM Business transaction save mode
  5. Qt文档阅读笔记-DTLS server解析
  6. c语言求两个有序表合成差集代码,两个有序链表求差集，合并为一个有序链表...
  7. 微型计算机远程编程微软,用微软的云计算来远程管理自己的电脑
  8. 使用 Python SimpleHTTPServer 快速共享文件
  9. java鼠标监听事件_Java鼠标事件监听器的创建和使用教程及代码
  10. 车联网仿真测试解决方案
  11. 设计并实现一个员工（Employee）类（C++）
  12. 【历史上的今天】8 月 19 日：大型计算机先驱和小型机之父诞生；中国雅虎邮箱成历史
  13. 二十一世纪大学英语读写基础教程学习笔记（原文）——3 - Mothers（母亲）
  14. 吴忌寒革职詹克团，强势回归被称“矿圈乔布斯”
  15. linux硬件命令大全,Linux硬件信息命令大全
  16. u盘一直提示格式化是什么原因？怎么找回数据？
  17. HTML5+CSS3 02（表格、表单标签、语义化，字符实体标签）
  18. python中从键盘输入五个单词输出以元音字母开头的单词_Python程序设计入门——第五周作业...
  19. python音标1003python音标_python selenium 爬取百度翻译单词音标
  20. [转]: 探索中国独立博客的发展

热门文章

  1. BCB6.0里没有TCppWebBrowser
  2. 关于单点登录中同一浏览器session信息共享的又一解决办法
  3. andriod开发环境配置
  4. matlab::mex::ArgumentList outputs的创建
  5. BZOJ-2440 (莫比乌斯函数)
  6. CMake基础 第8节 包含第三方库
  7. python3 测试函数的一个例子
  8. 按我的理解string似乎不是字面值类型，但为什么《c++ primer》习题7.55答案说Data类是集合类呢？
  9. 空指针：从 0 到 NULL，再到 nullptr
  10. 用户不见了_03 | 为什么你设计的信息用户总是看不见