ES6-Promise学习

2024-11-26 来源：个人技术集锦

概念：
Promise是javascript解决异步编程的一种解决方案。
从语法上说，Promise是一个构造函数，可以构造一个promise对象。
简单来说，Promise就是一个容器，保存着某个未来才会结束的事件（通常是异步操作）的结果。
Promise的英文意思就是“承诺”。

Promise对象有三个状态：
最初的状态 pending （进行中）
成功的状态 fulfilled （已成功）
失败的状态 rejected （已失败）

Promise对象的特点：

Promise对象状态的变化只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生了，那么Promise对象的状态就凝固了，不会再发生改变，这时就称为resolved（已定型）。

Promise对象的基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
Promise构造函数接收一个函数作为参数，它所接收的参数也有两个参数，分别是resolve和reject，这两个参数也是函数，由JavaScript引擎提供，不用自己部署。
resolve： 将Promise对象的状态从"pendding"变为"fulfilled"，在异步操作成功时调用，将异步操作的结果作为参数传递出去
reject: 将Promise对象的状态从"pending"变为"resolved"，在异步操作失败时调用，将异步操作报出的错误，作为参数传递出去
Case：

function getRandom(){
  return new Promise(function(resolve,reject){
    let Random=Math.random(); //获取一个随机数
    if(Random>0.5){
      resolve('你成功了：'+Random)
    }else{
      reject('你失败了:'+Random)
    }
  });
}

使用Promise对象实现Axios操作

    var axios = {
      // 基于promise对象机制
      get({ url }) {
        return new Promise(function (resolve, reject) {
          // 异步交互
          // 1.new xhr实例
          let xhr = new XMLHttpRequest();
          // 2.设置请求行
          xhr.open('get', url)
          // 3.设置请求头
          xhr.setRequestHeader('content-type', 'application/json')
          // 4.发送请求
          xhr.send()
          //5.监听
          xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
              if (this.status == 200) {
                resolve('信息：' + this.response)
              } else {
                reject(this)
              }
            }
          }
        })
      }
    }
    axios.get('url').then((res) => {
      console.log(res);
    }).catch((error) => {
      console.log(error);
    })

Promise对象的原型API

Promise.prototype.then()

then()方法是作为Promise实例添加状态改变时的回调函数
then()方法的第一个参数是resolved状态(成功时)的回调函数
then()方法的第二个参数是rejected状态(失败时)的回调函数
它们都是可选的，then()方法返回的是一个新的Promise实例。

Promise.prototype.catch()

catch()方法是.then()方法的特殊类型，
相当于then(null,rejection)或then(undefined,rejection)。
catch()方法用于指定发生错误时的回调函数

Case

get().then((res)=>{
	console.log(res);
}).catch((error)=>{
	console.log(error)
})

上面的代码中get()方法返回一个Promise对象，如果该对象的状态变为成功时，则会调用then()方法指定的回调函数，如果异步操作抛出错误，该对象的状态就会变为失败，就会调用catch()方法指定的回调函数处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

Promise.prototype.finally()

finally()方法用于指定不管Promise对象最后状态如何，都会执行的操作。
比如一个例子，服务器使用Promise处理请求，然后使用finally()方法关闭服务器

server.listen(port).then((res)=>{
	console.log(res)//成功时执行的方法
}).catch((error)=>{
	console.log(error)//失败时执行的方法
}).finally(server.stop)//不管成功与否，最后都要关闭服务器

…

Promise应用
使用Promise封装一个get请求

    function get(url){
      return new Promise(function(resolve,reject){
        // 1.创建实例
        var xhr=new XMLHttpRequest();
        // 2.open
        xhr.open('get',url);
        // 3.设置请求头
        xhr.setRequestHeader('content-type','application/json');
        // 4.发送请求
        xhr.send();
        // 5.处理数据
        xhr.onreadystatechange=function(){
          if(xhr.readyState==4){
            if(xhr.status==200){
              console.log('请求到的数据:',this.response);
            }else{
              console.log('请求错误:',this.response);
            }
          }
        }
      })
    }
    get('url').then((res)=>{
      console.log(JSON.parse(res));
    }).catch((err)=>{
      console.log(JSON.parse(err));
    })

显示全文

全部栏目

ES6-Promise学习