ES6(十) Promise对象

基本概念

名称

翻译为承诺,这就表示将来会执行的操作,代表异步操作

状态

一共有三种状态,分别是 pending(进行中),fulfilled(已成功)和 rejected(已失败)

特点

• 只有异步操作可以决定当前处于的状态,并且任何操作无法改变这个状态

• 一旦状态改变,就不会在变。状态改变的过程只可能是从(进行中)变成(已成功) 或者(进行中)变成(已失败)如果状态发生上述变化后,此时状态就不会在改变了,这是就称为 resolved(已定型)

基本用法

promise 对象是由关键字 new 及其构造函数来创建

基本用法

const promise = new Promise((resolve, reject) => {
  if (success) {
    resolve(value) //已成功
  } else {
    reject(error) //已失败
  }
})

由上述代码可知:该构造函数接收两个函数作为参数,分别是 resolve 和 reject,当异步操作执行成功后,会将异步操作的结果作为参数传入 resolve 函数并执行,此时 promise 对象状态从 pedding 变成已成功。失败的话就会将异步操作错误的结果作为参数传入 reject 函数并执行,此时 promise 对象从 pending 变成 rejected(已失败)

• 接下来我们通过 then 方法分别指定 resolved 状态和 rejected 状态的回调函数

then()方法可以接收两个回调函数作为参数,第一个回调函数就是已成功状态的调用,第二个回调函数就是已失败的回调函数调用

promise.then(
  (value) => {
    //成功的操作
  },
  (value) => {
    //失败的操作
  }
)

单独的方法

Promise.all(可迭代的对象)

• 参数 可迭代的对象必须是一个可迭代的对象 例如 Array 或者 String

• 返回值 一个新的 Promise 实例

Promise.all 的使用,如果传入的参数中存在不是 promise 实例,则会先调用 Promise.resolve 将其转为 promise 实例,在进一步处理

var p1 = Promise.resolve(3)
var p2 = 1337
var p3 = new Promise((resolve, reject) => {
  settimeout(resolve, 100, 'foo')
})
Promise.all([p1, p2, p3]).then((values) => {
  console.log(values)
})

promise.all 的快速返回失败行为,传入的参数中任意一个 promise 返回失败,则整体立即返回失败,返回的错误信息就是第一个失败的 promise 结果

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one')
})

var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two')
})

var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three')
})

var p4 = new Promise((resolve, reject) => {
  reject('p4 reject')
})

var p5 = new Promise((resolve, reject) => {
  reject('p5 reject')
})

Promise.all([p1, p2, p3, p4, p5]).then(
  (values) => {
    console.log(values)
  },
  (reason) => {
    console.log(reason)
  }
)
//结果p4 reject

Promise.race(可迭代对象)

• 参数 可迭代对象必须是一个数组或者字符串

• 返回值 一个新的 Promise 实例

Promise.race 的使用,race 有赛跑之译,因此返回的新实例状态,是跟随参数中最先改变状态的那个实例。如果不是 Promise 实例,依旧先用 promise.resolve 方法,转化后在处理,如果传的迭代为空则返回的 promise 永远等待

var promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one-resolve-500')
})

var promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 500, 'two-reject-500')
})

Promise.race([promise1, promise2]).then(
  (value) => {
    console.log(value)
  },
  (err) => {
    console.log(err)
  }
)
//two-reject-500

Promise.resolve(value)

返回一个给定的值解析后的 Promise 对象

参数 value 主要有以下几种情况

• 一个 Promise 实例,原封不动返回实例

var original = Promise.resolve('我是第二行')

var cast = Promise.resolve(original)

cast.then((value) => {
  console.log('value' + value)
})
console.log('original ===cast ?' + (original === cast))

//'original===cast?true'
//'value:我在第二行'

• 一个 thenable 对象:是指还有 then 方法的对象,跟随这个 thenable 对象的,采用它最终状态

let thenable = {
  then: function (resolve, reject) {
    resolve(42)
  },
}

let p = Promise.resolve(thenable)

p.then(function (value) {
  console.log(value)
})

// 42

• 普通数据[String|Array|Object|Number]

let p = Promise.resolve(123)
p.then((num) => {
  console.log(num)
})
//123

• 无参数 直接返回一个 resolved 状态的 Promise 对象

let p = Promise.resolve()

p.then(() => {
  //do something
})

Promise.reject(reason)

• 参数:表示被拒绝的原因

传入的参数会原封不动的作为 reject 函数的理由,并不会因为传入的参数 promise 或者是 thenable 对象而有所不同

• 返回值 一个含有 reason 状态的 rejected 的 Promise

Fetch

Fetch 就是 ES6 提供的一个异步接口，这样省的自己封装了

let url = "http://jsonplaceholder.typicode.com/posts ";
fetch(url)
    .then(response => response.json()) /*解析数据流*/
    .then(data => console.log(data))
    .catch(err => console.log("error" + err));