ES6 之 Promise用法

1. 为什么使用Promise

1. 避免回调地狱的问题
2. Promise对象提供了简洁的API，使得控制异步操作更加容易
3. 异步操作的同步化

---

2.Promise的基本使用

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

语法 new Promise((resolve， reject) =>{})

• Promise接受一个函数作为参数
• 在参数函数中接收两个参数
  • resolve：成功函数
  • reject：失败函数

promise实例有两个属性

• state: 状态
• result: 结果

1）promise的状态

第一种状态：pending(准备，待解决，进行中)
第二种状态：fulfilled(已完成，成功)
第三种状态：rejected(已拒绝，失败)

2) promise状态的改变

通过resolve()与reject()改变当前的promise对象的状态

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

结论：

• resolve():调用函数,使当前promise对象状态改为fulfilled
• reject():调用函数，使当前promise对象状态改为rejected
• 一般抛出异常也会导致promise对象状态改为rejected

promise状态的改变是一次性的(单向的)

3）promise的结果

 const p = new Promise((resolve, reject) => {
	//通过调用resolve，传递参数，改变当前的promise对象的结果
	resolve('成功的结果');
	// reject('失败的结果');
})
console.dir(p);

---

3 promise的方法

1）then()方法

const p = new Promise((resolve, reject) =>{
  resolve('成功');
  // reject('失败');
})

//then的返回值是一个promise对象
p.then((res) => {
  console.log(res);//'成功'
  //当promise的状态为fulfilled，执行
  console.log('成功的调用');
}, (err)=>{
  // 当promise的状态为rejected，执行
  console.log('失败的调用',err);
})

• then里面的两个参数均是函数，通过形参的形式来返回值一个promise对象的结果
• then方法返回一个新的promise实例，状态是pending

补充：

• 链式操作：new Promise((resolve, reject)=>{}).then().then()

promise的状态不改变，不会执行then里的方法

new Promise((resolve, reject) => {
  // resolve();
}).then((val) => {
	console.log('成功');
}, (reason) => {
	console.log('失败')
})

1. 在then方法中，通过return将返回的promise实例的状态改为fulfilled

const pro = new Promise((resolve, reject) => {
	resolve();
});

const temp = pro.then((val) => {
	console.log('成功');
	// 使用return 可以将实例的状态改成fulfilled
	return '这是实例的返回';
}, (reason) => {
	console.log('失败');
})

temp.then(val => {
	console.log(val);//这是实例的返回
}, (reason) => {
	console.log('失败1');
})

2. 在then方法中，出现代码错误，会将返回的promise实例状态改为rejected

const pro = new Promise((resolve, reject) => {
  resolve();
});

const temp = pro.then((val) => {
    // 如果这里的代码出错，会将temp实例的状态改成rejected
    console.log(a);// a is not defined
}, (reason) => {
    console.log('失败');
})

temp.then(val => {
    console.log(val);
}, (reason) => {
    console.log('失败1', reason);
})

2）catch方法

捕捉promise错误函数，和then函数参数中rejected作用一样，处理错误，由于Promise抛出错误具有冒泡性质，能够不断传递，会传到catch中，所以一般来说所有错误处理放在catch中，then中只处理成功的，同时catch还会捕捉resolved中抛出的异常

const pro = new Promise((resolve, reject) => {
    // reject();
    // console.log(a); // a is not defined
    throw new Error('出错了')
  });

  //1.当promise的状态为reject，执行
  //2.当promise执行体代码出错，会将temp实例的状态改成rejected
  pro.catch((reason) => {
      console.log('失败', reason); // 出错了
  })

• 常见写法

 new Promise((resolve, reject) => {

  }).then(val => {
      //成功执行
      console.log(val);
  }).catch(reason => {
      //失败执行
      console.log(reason);
  })

3) all方法

Promise.all([promise1,promise2])——参数是对象数组。以慢为准，等数组中所有的promise对象状态为resolved时，该对象就为resolved；只要数组中有任意一个promise对象状态为rejected，该对象就为rejected

let p = Promise.all([Promise1, Promise2])

p.then((data) => {
    //都成功才表示成功
})
.catch((err) => {
    //有一个失败，则都失败
});

4) race方法

Promise.race([promise1,promise2])——参数是对象数组。以快为准，数组中所有的promise对象，有一个先执行了何种状态，该对象就为何种状态，并执行相应函数

---

4 用Promise解决回调地狱

//封装一个promise对象请求
function getData(url, data = {}) {
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'GET',
             url,
             data: data,
             success: function(res) {
                 //修改promise的状态为成功，修改promise的结果res
                 console.log('res :>> ', res);
                 resolve(res);
             },
             error: function(res) {
                 //修改promise的状态为失败，修改promise的结果res
                 console.log('res :>> ', res);
                 reject(res)
             }
         })
     })
 }
//链式操作解决 地狱回调
 getData('data.json').then((data) => {
     const {id} = data;
     return getData('data2.json', {id})
 }).then(data => {
     const { username } = data
     return getData('data3.json', { username })
 }).then(data =>{
     console.log('data :>> ', data);
 })