Promise

基本示例

异步执行

end 先打印

const promise = new Promise((resolve, reject) => {
  resolve(100)

  // reject(new Error('promise rejected'))
})

promise.then((value) => {
  console.log('resoled', value)
}, (error) => {
  console.log('rejected', error)
})

console.log('end')

Promise 方式的AJAX

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (xhr.response.status === 200) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(xhr.response.statusText)
      }
    }
    xhr.send()
  })
}

ajax('/api/users.json').then((res) => {
  console.log(res)
},(error) => {
  console.log(error)
})

链式调用

• Promise 对象的then 方法会返回一个全新的Promise对象
• 后面的then方法就是在为上一个then返回的Promise注册回调
• 前面的then方法中回调函数的返回值会作为后面then方法回调的参数

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (xhr.response.status === 200) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(xhr.response.statusText)
      }
    }
    xhr.send()
  })
}

ajax('/api/users.json')
  .then(() => {
    console.log(111)
  })
  .then(() => {
    console.log(222)
  })
  .then(() => {
    console.log(333)
  })

手动回调

ajax('/api/users.json')
    .then(() => {
        console.log(111)
        return ajax('/api/users.json')
    })
    .then(() => {
        console.log(222)
        return ajax('/api/users.json')
    })
    .then(() => {
        console.log(333)
        return ajax('/api/users.json')
    })
    .then(() => {
        console.log(444)
        return 'foo'
    })
    .then((value) => {
        console.log(555)
        console.log(value)
    })

异常处理

function ajax(url) {
  return new Promise((resolve, reject) => {
    throw new Error()
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (xhr.response.status === 200) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(xhr.response.statusText)
      }
    }
    xhr.send()
  })
}

ajax('/api/users.json')
  .then(() => {
    console.log(111)
  }, () => {
    console.log(112)
  })

用catch方法注册reject回调

ajax('/api/users.json')
  .then(() => {
    console.log(111)
  }).catch((e) => {
    console.log(e)
  })

并行执行

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (xhr.response.status === 200) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(xhr.response.statusText)
      }
    }
    xhr.send()
  })
}

const promise = Promise.all([
  ajax('/api/users.json'),
  ajax('/api/posts.json')
])

promise.then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

race 方法，以第一个promise结束为准

500毫秒内判断第一个是否成功

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (xhr.response.status === 200) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(xhr.response.statusText)
      }
    }
    xhr.send()
  })
}

const request = ajax('/api/posts.json')
const timeout = new Promise((resolve, reject) => {
  setTimeout(() =>
    reject(new Error('timeout')), 500)
})

Promise.race([request, timeout])
  .then((value) => {
    console.log(value)
  })
  .catch((err) => {
    console.log(err)
  })