es6 特性之 Promise

Promise 是什么

• Promise 是一个对象
• 在控制台打印 Promise 可以看到输出的结果为一个构造函数
• Promise 上有自己的方法，reject 和 resolve ，原型上有 catch 和 then
  

Promise 的作用

• 主要用于异步执行函数
• 控制函数执行顺序
• 在对象之间传递和操作 Promise

Promise 的参数

• Promise 函数接收一个参数，这个参数是一个回调函数 function ，这个 function 有两个入参，分别是 reject 和 resolve
• Promise 的初始状态为 pending (挂起状态)，调用时，一旦 Promise 的状态确定就无法更改
• 执行 resolve 的时候会将 Promise 的状态置为 fullfield
• 执行 reject 的时候会将 Promise 的状态置为 rejected
• 应用时，可以简单得理解为 resolve 是 Promise 的成功回调函数，reject 是 Promise 的失败回调函数

Promise 的执行

• 在执行 new Promise 的时候，Promise 参数中的 function 会立即执行

let proVal = new Promise(function(resolve,reject){
    setTimeout(function(){
        console.log('执行定时器的结果');
        resolve()
    },2000)
})

• 在控制台执行上述代码的时候，在 new 的过程中就会执行 Promise 入参 function 中的内容，在两秒后，会在控制台输出结果
• 为了方便控制 Promise 的执行，一般在 Promise 外面包一层函数，在这个函数的最后，将 Promise 实例对象 return 出去，这样就可以在这个函数上调用 Promise 原型上的 then 和 catch 方法

function proFunc(){
    let proVal = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log('执行定时器的结果');
            resolve('输入的参数')
            reject('错误的返回')
        },10)
    })
    return proVal
}
// 在需要的时候调用Promise
proFunc().then(function(res){
    console.log('then回调的值',res)
}).catch(function(err){
    console.log('catch回调的值',err)
})

• 这里的 reject 没有被执行，是因为 Promise 的状态只能改变一次，先执行了 resolve 就不会再执行 reject了
• 如果将 reject 和 resolve 换一下位置，先执行 reject ，就会进入 catch 的回调
  

Promise 的回调

then

function proFunc(){
    let proVal = new Promise(function(resolve,reject){
        let time = (new Date()).getTime()
        if(time % 2 == 0) {
            resolve('执行resolve')
        }else {
            reject('执行reject')
        }
    })
    return proVal
}
// 在需要的时候调用Promise
proFunc().then(function(res1){
    console.log('then回调的值1',res1)
},function(res2){
    console.log('then回调的值2',res2)
})

• then 中接收两个参数，第一个参数是 resolve 的回调，第二个参数是 reject 的回调

catch

• catch 的回调和 then 回调的第二个参数一样，指向 reject
• catch 的另一个作用，在 then 执行第一个参数，即 resolve 的时候，如果抛异常，会进入 catch 方法

function proFunc(){
    let proVal = new Promise(function(resolve,reject){
        let time = (new Date()).getTime()
        if(time % 2 == 0) {
            resolve('执行resolve')
        }else {
            reject('执行reject')
        }
    })
    return proVal
}
// 在需要的时候调用Promise
proFunc().then(function(res1){
    //console.log(test)
    console.log('then回调的值1',res1)
}).catch(function(err){
    console.log('catch回调的值',err)
})

• 如果 then 去掉第二个参数，catch 执行两个功能，一个是执行 reject 回调，另一个就是接收 then 第一个参数里的异常
• 如果 then 里面有两个参数，catch 默认不执行 reject 的回调

Promise 的应用

• 如果有一个接口请求方法在不同的模块中都会用到，但是方法执行成功之后，不同的页面进行的下一步操作不同
• 这种情况就可以将其封装到公共 API 中，并使用 Promise 回调控制当前使用的页面，执行下一步具体要干什么

import api from 'axios等接口请求封装方法'
// 公共封装的 api.js
// 某公共方法 getUserMsg
export function getUserMsg(flag, param) {
  let params = {
  	flag:flag,
    name:param.name,
    age:param.age
  }
  return new Promise((resolve, reject) => {
    api.http('http://XX.XX.com', obj).then((res) => {
      if (res.status == '1') {
	    // 请求成功，回调then返回data
	    let result = res.data
	    resolve(result)
      } else {
      	// 请求失败，回调then返回data
        reject(res)
      }
    }).catch((err) => {
      // 请求失败，回调then返回data
      reject(err)
    })
  })
}
export default {
  // 将公共 API 暴露出去
  getUserMsg(flag, param) {
    return getUserMsg(flag, param)
  },
}

• 不同页面中的调用

// 第一个页面
import globalApi from '引入第三方公共 API'
let flag = true,
let param = {
  name: 'zhouzhou',
  age: 18
}
globalApi .getUserMsg(flag, param).then((res) => {
   // 执行接口调用成功之后做点儿什么
 }).catch(()=>{
   // 执行接口调用失败之后做点儿什么
 })

// 第二个页面
import globalApi from '引入第三方公共 API'
let flag = false,
let param = {
  name: 'yueban',
  age: 26
}
globalApi .getUserMsg(flag, param).then((res) => {
   // 执行接口调用成功之后做点儿什么
 }).catch(()=>{
   // 执行接口调用失败之后做点儿什么
 })