深入理解Promise/ajax

1,811 阅读4分钟

Promise 对象特点

  1. 对象的状态不受外界影响。 Promise对象代表一个异步操作, 有三种状态: pending( 进行中)、 fulfilled( 已成功) 和rejected( 已失败)。 只有异步操作的结果, 可以决定当前是哪一种状态, 任何其他操作都无法改变这个状态。
  2. 一旦状态改变, 就不会再变, 任何时候都可以得到这个结果。 Promise对象的状态改变, 只有两种可能: 从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生, 状态就凝固了, 不会再变了, 会一直保持这个结果, 这时就称为 resolved( 已定型)。 如果改变已经发生了, 你再对Promise对象添加回调函数, 也会立即得到这个结果。

Promise缺点

  1. 无法取消promise, 一旦新建它会立即执行, 无法中途取消.
  2. 如果不设置回调函数, promise内部抛出的错误, 不会反应到外部.
  3. 当处于pending 状态时, 无法得知目前进展到那一阶段.

静态方法

  • Promise.reslove()
    1. 将现有对象转换为Promise对象
    2. 如果参数是promise实例,则直接返回这个实例
    3. 如果参数是thenabled对象(有then方法的对象),则先将其转换为promise对象,然后立即执行这个对象的then方法
    4. 如果参数是个原始值,则返回一个promise对象,状态为resolved,这个原始值会传递给回调
    5. 没有参数,直接返回一个resolved的Promise对象
  • Promise.reject()
    1. 同上,不同的是返回的promise对象的状态为rejected
  • Promise.all()
    1. 接收一个Promise实例的数组或具有Iterator接口的对象
    2. 如果元素不是Promise对象,则使用Promise.resolve转成Promise对象
    3. 如果全部成功,状态变为resolved,返回值将组成一个数组传给回调
    4. 只要有一个失败,状态就变为rejected,返回值将直接传递给回调
    5. all() 的返回值也是新的Promise对象
  • Promise.race()
    1. 只要有一个Promise实例率先发生变化(无论是状态变成resolved还是rejected)都触发then中的回调,返回值将传递给回调
    2. race()的返回值也是新的Promise对象

代码用法和误区

常见用法

  1. promise 的神奇之处在于让我们能够在回调函数里面使用 return 和 throw
  2. 如果没有任何返回,将默认返回 undefined
    loadAsync1()
    	.then(function(data1) {
    		return loadAsync2(data1)
    	})
    	.then(function(data2){
    	    return loadAsync3(data2)
    	})
    	.then(okFn, failFn)
    *******************	*****************
    loadAsync1()
    	.then(function(data1) {
    		loadAsync2(data1)
    	})
    	.then(function(data2){
    	    loadAsync3(data2)
    	})
    	.then(res=>console.log(res))	
    

catch()与then(null, fn)

 不等同情况,此时catch捕获并不是ajaxLoad1错误 而是ajaxLoad2的错误。**看场景有时要结合起来使用**
 ```js
 ajaxLoad1()
	.then(res=>{ return ajaxLoad2() })
	.catch(err=> console.log(err))
	----------------------
	// 结合使用
ajaxLoad1()
	.then(res=>{ return ajaxLoad2() },     err=>console.log(err))
	.catch(err=> console.log(err))
 ```

穿透 Fall Through

如果then或catch接收的不是函数,那么就会发生穿透行为,所以在应用过程中,应该保证then接收到的参数始终是一个函数

new Promise(resolve=>resolve(8))
 .then(1)
 .catch(null)
 .then(Promise.resolve(9))
 .then(res=> console.log(res))
// 8  

用Promise实现一个Ajax操作

// 0 未初始化未调用open     
// 1.启动 调用open 未调用 send
// 2. 发送 已调用send() 但是未响应   
// 3. 接收 已经接收部分响应数据  
// 4.完成  完成全部数据响应 
 const ajax = function (params) {
      if (!params.url) return
      const promise = new Promise((resolve, reject) => {
        const handler = function () {
          if (this.readyState !== 4) return
          if (this.status == 200) {
            try {
              let resonse = JSON.parse(this.responseText)
              resolve(resonse)
            } catch (error) {
              reject(error)
            }
          } else {
            reject(new Error(this.statusText))
          }
        }
        const xhr = new XMLHttpRequest()
        if (params.method.toLowerCase() == 'get') {
          xhr.open('get', url + '?' + formatParams(params.data));
          xhr.send()
        } else {
          xhr.open('post', url);
          xhr.send(JSON.stringify(params.data));
        }
        xhr.onreadystatechange = handler
        xhr.responseType = 'json'
        xhr.setRequestHeader('Accept', 'application/json');
      })
      return promise

      function formatParams(obj) {
        if (!data) return
        var arr = []
        for (let i in obj) {
          arr.push(`${encodeURIComponent(i)}=${encodeURIComponent(obj[i])}`)
        }
        return arr.join('&')
      }
    }

Promise常见问题

reject 和 catch 的区别

- promise.then(onFulfilled, onRejected)
   在onFulfilled中发生异常的话,在onRejected中是捕获不到这个异常的。
- promise.then(onFulfilled).catch(onRejected)
  .then中产生的异常能在.catch中捕获

如果在then中抛错,而没有对错误进行处理(即catch),那么会一直保持reject状态,直到catch了错误

 ```JS
    /* 例4.1 */
    function taskA() {
    console.log(x);
    console.log("Task A");
    }
    function taskB() {
    console.log("Task B");
    }
    function onRejected(error) {
    console.log("Catch Error: A or B", error);
    }
    function finalTask() {
    console.log("Final Task");
    }
    var promise = Promise.resolve();
    promise
    .then(taskA)    // 抛出错误,不继续Task A”
    .then(taskB)   // .then没有捕获A抛出的错,不打印 “Task B”
    .catch(onRejected)  // 捕获了A的错,打印错误信息
    .then(finalTask);   // 错误已经被捕获,执行resolve
    
    -------output-------
    Catch Error: A or B,ReferenceError: x is not defined
    Final Task
 ```

每次调用then都会返回一个新创建的promise对象,而then内部只是返回的数据

```JS
    //方法1:对同一个promise对象同时调用 then 方法
    var p1 = new Promise(function (resolve) {
        resolve(100);
    });
    p1.then(function (value) {
        return value * 2;
    });
    p1.then(function (value) {
        return value * 2;
    });
    p1.then(function (value) {
        console.log("finally: " + value);
    });
    -------output-------
    finally: 100
------------------------------------------------------
    //方法2:对 then 进行 promise chain 方式进行调用
var p2 = new Promise(function (resolve) {
    resolve(100);
});
p2.then(function (value) {
    return value * 2;
}).then(function (value) {
    return value * 2;
}).then(function (value) {
    console.log("finally: " + value);
});
-------output-------
finally: 400
```

在异步回调中抛错,不会被catch到

```JS
    // Errors thrown inside asynchronous functions will act like uncaught errors
    var promise = new Promise(function(resolve, reject) {
      setTimeout(function() {
        throw 'Uncaught Exception!';
      }, 1000);
    });
    
    promise.catch(function(e) {
      console.log(e);       //This is never called
    });
```