Promise替代Ajax？

简介

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 状态

一、Promise 有三种状态：

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

只有异步操做的结果，能够决定当前是哪种状态，任何其余操做都没法改变这个状态。

二、 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('失败的结果')
})
复制代码