39.promise | 星城哈哈

# 39.promise

39.promise

# 1.Promise 概述

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

使用 Promise主要有以下好处:

主要解决异步深层嵌套的问题 (回调地狱)
promise 提供了简洁的API, 使得异步操作更加容易

# 2.Promise 基本用法

实例化 Promise 对象, 构造函数中传递函数, 该函数中用于处理异步任务
resolve 和 reject 两个参数用于处理成功和失败两种情况, 并通过p.then获取处理结果

 var p = new Promise(function(resolve, reject){
   	 // 这里用于实现异步任务
     // 成功时调用 resolve()
   	 // 失败时调用 reject()
 });

 p.then(function(ret){
   // 从resolve得到正常结果
 }, function(ret){
   // 从reject得到错误信息
 })

1
2
3
4
5
6
7
8
9
10
11

# 3.基于Promise处理Ajax请求

# 1).处理原生Ajax

    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    queryData('http://localhost:3000/data')
      .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

# 2).发送多次ajax请求

    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });

1
2
3
4
5
6
7
8
9
10
11
12
13

# 4.then参数中的函数返回值

# 1).返回 Promise 实例对象

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

# 2).返回普通值

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

# 5.Promise 常用API

# 1).实例方法

p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行(尚且不是正式标准)

queryData()
	.then(function(data){
      console.log(data);
	})
	.catch(function(data){
      console.log(data);
	})
	.finally(function(){
      console.log('finished')
	});

1
2
3
4
5
6
7
8
9
10

# 2).静态方法(对象方法)

Promise.all() 并发处理多个异步任务, 所有任务都执行完成才能得到结果
Promise.race() 并发处理多个异步任务, 只要有一个任务完成就能得到结果

Promise.all([p1,p2,p3]).then((result) => {
  console.log(result)
})
            
Promise.race([p1,p,2,p3]).then((result) => {
  console.log(result)
})

1
2
3
4
5
6
7

← 38.异步调用 40.fetch概述 →