前言

Promise是ES6定制小程序开发引入的一个新的语法，定制小程序开发专门用于异步编程。

一、JS中的

在js中，定制小程序开发异步编程有三种

1、

setInterval(() => { // ...}, interval);setTimeout(() => {	// ...}, timeout);
1
2
3
4
5
6

2、ajax

$.ajax({    url,    data,    success:function (result){    	alert(result)    }})
1
2
3
4
5
6
7

3、 定制小程序开发事件回调函数

 //定制小程序开发定义主函数，回调函数作为参数function A(callback) {    callback();    console.log('我是主函数');}//定义回调函数function B() {    setTimeout("console.log('我是回调函数')",2000);//即使此时时间设置为0，也会先输出主函数}//调用主函数，将B传进去A(B);
1
2
3
4
5
6
7
8
9
10
11
12
13

多次依赖分析

① 多次异步调用的结果顺序不确定
② 异步调用结果如果存在依赖必须使用嵌套

二、Promise

1、概念

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，它可以获取异步操作的消息

官方:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

2、优点

① 可以避免多层异步调用嵌套问题（回调函数）
② Promise 对象提供了简洁的API,使得控制异步操作更加容易

3、基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

new Promise(function(resolve, reject){ })
1

resolve和reject两个参数用于处理成功和失败两种情况

4、基本逻辑

如果想让Promise成功执行下去，需要执行resolve，如果让它失败执行下去，需要执行reject
resolve进then，reject进catch

var p = new Promise(function(resolve,reject){	// 这里用于实现异步任务	// 成功时调用resolve()	// 失败时调用reject()});p.then(   function (data) {       // 从resolve得到正常结果       console.log(data);}) .catch(    function (info) {     // 从reject得到错误信息     console.log(info);})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、小案例

var p = new Promise(function (resolve, reject) {  setTimeout(function () {    var flag = false;    if (flag) {      //正常情况下      resolve("hello");    } else {      reject("出错了");    }  }, 1000);});// 方法一p.then(  function (data) {    console.log(data);  }).catch( function (info) {    console.log(info);  })// 方法二p.then(  function (data) {    console.log(data);  },function (info) {    console.log(info);  })// 方法一和方法二等效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6、终止执行链

如果想终止在某个执行链的位置，可以用Promise.reject(new Error())

new Promise(function(resolve, reject) {    resolve(1)}).then(result => {    return result + 1}).then(result => {    return result + 1}).then(result => {	// 终止掉程序，不再进入下一个then而是进入catch  return  Promise.reject(new Error(result + '失败'))   // return result + 1}).then(result => {    return result + 1}).catch(error => {	    alert(error)})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、基于Promise处理Ajax请求

1、封装Promise函数处理原生Ajax请求

封装Promise函数

function queryData() {  return new Promise(function (resolve, reject) {    var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function () {      if (xhr.readyState != 4) return; //不做处理      if (xhr.status == 200) {        //处理正常的情况        resolve(xhr, responseText);      } else {        //处理异常的情况        reject("出错了");      }    };    xhr.open("get", "/data");    xhr.send(null);  });}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、then参数中的函数返回值

① 返回Promise实例对象
返回的该实例对象会调用下一个then

queryData("http://localhost:3000/data")  .then(function (data) {    console.log(data);  })  .catch(function (info) {    console.log(info);  });
1
2
3
4
5
6
7

② 返回普通值
返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

//发送多个ajax请求并且保证顺序queryData("http://localhost:3000/data")  .then(function (data) {    console.log(data);    return qureyData("http://localhost:3000/data1");  })  .then(function (data) {    console.log(data);    return qureyData("http://localhost:3000/data2");  })  .then(function (data) {    console.log(data);  });
1
2
3
4
5
6
7
8
9
10
11
12
13

四、Promise常用的API

1、实例方法

原型中的方法

queryData()  .then(function (data) {    console.log(data);  })  .catch(function (info) {    console.log(info);  }) .finally(function (info) {    console.log(info);  })
1
2
3
4
5
6
7
8
9
10

2、对象方法

Promise.all([p1,p2,p3]).then(result=>{  console.log(result);})Promise.race([p1,p2,p3]).then(result=>{   console.log(result);})
1
2
3
4
5
6
7