Promise替代Ajax?

317 阅读2分钟

简介

ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生(异步操作)的事件,用来传递异步操作的消息。
Promise 非常重要,是当今前端面试过程中基本上必考的问题。

Promise 优缺点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

回调地狱

什么是回调地狱:在回调函数中调用回调函数...

需求:通过ajax获取用户id,再通过id获取name,再通过name获取用户email

  $.ajax({
    type: "GET",
    url: "data1.json",
    success: function(res1){
         let {id} = res; //对象解构
         $.ajax({
            type: "GET",
            url: "data2.json",
            data: {id}, //对象简写,相当于 {id: id}
            success: function(res2){
                let {username} = res2;
                $.ajax({
                  type: "GET",
                  url: "data3.json",
                  data: {username},
                  success: function(res){
                      console.log(res.email)
                  }
                })
            }
         }) 
    }
  })

Promnis解决了回调地狱。

promise 基础用法

promise 对象是一个构造函数,可以使用 new 来调用 Promise 的构造器来进行实例化。

  var promise = new Promise(function(resolve, reject) {});
  • promise 接受一个函数作为参数。
  • 在函数中接受两个参数:
    • resolve
    • reject
  • promise 实例有两个属性:
    • state:状态
    • result:结果

promise 状态

1、Promise 有三种状态:

  1. pending: 初始状态(准备、待解决、进行中),不是成功或失败状态。
  2. fulfilled: 已完成、成功。
  3. rejected: 已完成、失败。

只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

2、 Promise 对象的状态改变,只有两种可能:

  • 从 pending 变为 rejected
  • 从 pending 变为 rejected

示例:

const p = new Promise((resolve, reject) => {
  //resolve();调用函数,使当前的promise对象的状态改成fulfilled
  resolve();
})
console.dir(p)//fulfilled
const p = new Promise((resolve, reject) => {
  //reject();调用函数,使当前的promise对象的状态改成rejected
  reject();
})
console.dir(p)//rejected
//一次性
const p = new Promise((resolve, reject) => {
  reject();
  resolve();//不会更改当前promise状态
})
console.dir(p)//rejected

状态改变是一次性的
一旦状态改变,就不会再变,任何时候都可以得到这个结果。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

promise 结果

示例:

const p = new promise((resolve, reject) => {
	//调用resolve(), reject() 传参,改变当前 promise 的结果
    //resolve('成功的结果');
    reject('失败的结果')
})