您的位置: 首页  >  文章  >  【ECMAScript 5_6_7】9、ES6——Promise对象（异步回调问题解决方案一）

【ECMAScript 5_6_7】9、ES6——Promise对象（异步回调问题解决方案一）

分类: 文章 • 2024-10-20 19:25:40

一、理解：

* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise实例

二、使用promise基本步骤（2步）：

  1、创建promise对象

let promise = new Promise((resolve,reject) => {
    // 初始化promise状态为padding
    // 执行异步操作
    if(异步操作成功){
        resolve(value)  // 修改promise的状态为fullfiled
    } else {
        reject(errMsg)  // 修改promise的状态为rejected
    }
})

  2、调用promise的then()

promise.then(
    result => console.log(result),  // 成功的回调
    errorMsg => alert(errorMsg)  // 失败的回调
)

三、promise对象的三个状态

* pending：初始化状态

* fullfiled：成功的状态

* rejected：失败的状态

四、应用

* 使用promise实现超时处理

* 使用promise封装处理ajax请求

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();

 

五、promise过程分析

【ECMAScript 5_6_7】9、ES6——Promise对象（异步回调问题解决方案一）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise对象</title>
</head>
<body>
<script type="text/javascript">
  //创建一个promise实例对象
  let promise = new Promise((resolve,reject) => {
    //初始化promise的状态为pending--->初始化状态
    console.log('1111')  // 同步执行
    // 执行异步任务（通常是发送ajax请求，开启定时器）
    setTimeout(function () {
      console.log('3333')
      //下面根据异步任务的返回结果去修改promise的状态
      resolve('哈哈哈')  // 异步任务执行成功，修改promise为成功的状态fullfilled
      //reject('呜呜呜')  // 异步任务执行失败，修改promise为失败的状态rejected
    },1000)
  })
  console.log('2222')

  promise.then((data) => {  // 成功的回调，可以设置参数接收数据
    console.log(data + '执行成功了')
  },(error) => {  //失败的回调，可以设置参数接收数据
    console.log(error + '执行失败了')
  })

  //实现一个需求：先获取一篇新闻的主题内容（先展示给用户看），再根据隐藏id获取对应的评论内容（后展示给用户看）【这里需要先开启模拟路由：node www】
  function getNews(url) {
    let promise = new Promise((resolve,reject) => {
      //创建XMLHTTPRequest实例对象
      let request = new XMLHttpRequest()
      //监听状态
      request.onreadystatechange = function () {
        if(request.readyState == 4){
          //状态为200发送成功
          if(request.status == 200){
            let news = request.response
            resolve(news)
          }else{
            reject('暂时没有新闻内容')
          }
        }
      }
      //设置返回的数据类型
      request.responseType = 'json'  // 如果这里没有设置下面接收到的数据就需要用JSON.parse()转换
      //规定请求的方法，创建链接
      request.open('GET',url)
      //发送请求
      request.send()
    })
    return promise
  }

  getNews('http://localhost:3000/news?id=2')
    .then((data) => {
      console.log(data)
      let commentsUrl = data.commentsUrl
      let url = 'http://localhost:3000' + commentsUrl  // 拼串得到新的路由地址
      return getNews(url)  // 此处返回的相当于将上面返回的promise再往下面返回进入成功状态方法执行（.then可以链式调用）
    },(error) => {
      console.log(error)
    })
    .then((data) => {
      console.log(data)
    },(error) => {
      console.log(error)
    })

</script>
</body>
</html>

 

相关推荐