【ES6】Promise—异步编程解决方案

Promise是啥

在语法上，Promise是一个构造函数，用于封装异步操作，并获取其成功或失败的结果

• 构造函数：Promise(excutor){}
• Promise.prototype.then方法
• Promise.prototype.catch方法

创建一个简单的Promise实例

const p = new Promise(function(resolve, reject){
    setTimeout(function(){
        let data = '数据库中的数据'
        let err = '读取失败'
        //调用resolve表示异步操作成功，调用reject表示失败
        reslove(data)
    }, 1000)
})

//调用Promise对象的then方法，当Promise的实例p状态为成功时，调用第一个回调函数，失败时调用第二个
p.then(function(value){ //成功的形参
    console.log(value)
}, function(reason){ //失败的形参
    console.log(reason)
})

使用Promise读取文件 (111.txt)

1. 引入fs模块

   const fs = require('fs')
   

2. 调用方法进行文件读取（不使用Promise的写法）

   fs.readFile('./resourses/111.txt', (err, data)=>{
    //如果失败，则抛出错误
    if(err) throw err
    //如果成功，则输出内容
    console.log(data.toString())
   })
   

3. 使用Promise进行封装

   const p = new Promise(function(resolve, reject){
    fs.readFile('./resourses/111.txt', (err, data)=>{
        //如果失败，调用reject，表示操作失败
        if(err) reject(err)
        //如果成功，调用reslove，表示成功
        resolve(data)
    }
   })
   
   p.then(function(value){
    console.log(value.toString())
   }, function(reason){
    console.log("读取失败")
   })
   

使用Promise封装AJAX操作

接口地址：https://api.apiopen.top/getJoke

• 下面是原生的AJAX写法

  1. 创建对象

     const xhr = new XMLHttpRequest()
     

  2. 初始化

     xhr.open("GET", "https://api.apiopen.top/getJoke")
     

  3. 发送

     xhr.send()
     

  4. 绑定事件，处理响应结果

     xhr.onreadystatechange = function(){
        //判断readystate
        if(xhr.readystate === 4){
            //判断响应状态码
            if(xhr.status >= 200 && xhr.status < 300){ //成功
                console.log(xhr.response)
            }else{ //失败
                console.error(xhr.status)
            }
        }
     }
     

• 使用Promise进行封装

  const p = new Promise((resolver, reject)=>{
    const xhr = new XMLHttpRequest()
    xhr.open("GET", "https://api.apiopen.top/getJoke")
    xhr.send()
    xhr.onreadystatechange = function(){
    if(xhr.readystate === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            //成功，调用resolve
            resolve(xhr.response)
        }else{
            //失败，调用reject
            reject(xhr.status)
        }
    }
  }
  })
  
  //指定回调
  p.then(function(value){
    console.log(value)
  }, function(reason){
    console.error(reason)
  })
  

• 使用Promise对AJAX请求的区别是

  • 原本在处理异步的结果的时候，是在回调函数内部指定成功或者失败之后的下一步操作
  • 使用了Promise封装后，是在异步任务的后面通过then方法来指定回调，避免了产生“回调地狱”

then方法

这个then方法用于指定回调，但是前提是已经创建了Promise对象

const p = new Promise(resolve, reject)=>{
    setTimeout(()=>{
        resolve('用户数据')
    }, 1000)
}

const result = p.then(value => {
    console.log(value)
}, reason =>{
    console.error(reason)
})

• result里面保存了then方法的返回值，其值也是一个Promise对象，对象状态由回调函数的执行结果决定
  • 如果回调函数的返回值是 非Promise类型的属性，则状态为成功，且返回值为对象成功的值
  • 如果回调函数的返回值是Promise类型的属性，则根据返回的Promise对象的属性判断是否成功
  • 如果抛出错误，状态为失败，错误值为抛出来的值

catch方法

此方法用于指定当Promise失败的时候的回调，是then方法的语法糖

const p = new Promise(resolve, reject)=>{
    setTimeout(()=>{
        resject('失败')
    }, 1000)
}

//以下两种写法是等价的
p.then(function(value){}, function(reason){
    console.error(reason)
})

p.catch(function(reason){
    console.error(reason)
})