zoukankan      html  css  js  c++  java

  • ES6课程---10、promise对象

    ES6课程---10、promise对象

    一、总结

    一句话总结：

    promise对象是用来进行异步操作的，是将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数，promise对象的本质是状态机，通过设定不同的状态来执行不同的操作
    //创建一个promise实例对象
let promise = new Promise((resolve, reject) => {
  //初始化promise的状态为pending---->初始化状态
  console.log('1111');//同步执行
  //启动异步任务
  setTimeout(function () {
      console.log('3333');
      //resolve('成功了传过去的数据');//修改promise的状态pending---->fullfilled（成功状态）
      reject('失败了传过去的数据');//修改promise的状态pending----->rejected(失败状态)
  },2000);
});
promise.then((data) => {
  console.log('成功了：' + data);
}, (error) => {
  console.log('失败了：' + error);
});
console.log('2222');

    1、promise对象使用操作流程？

    a、创建promise对象：执行异步操作且设置promise状态
    b、调用promise的then()：接收设置的promise状态，接收异步操作执行成功或者失败的数据
    a、创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
b、调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))

    2、promise对象的本质是状态机，那么promise对象有哪些状态？

    1、pending: 初始化状态
    2、fullfilled: 成功状态
    3、rejected: 失败状态

    3、promise中如何设置状态？

    可以在promise的构造函数的参数对应的回调函数中设置，如果异步操作成功，可以通过resolve方法设置为成功状态（fullfilled），如果异步操作失败，可以通过rejected方法设置为失败状态（rejected）
    //创建一个promise实例对象
let promise = new Promise((resolve, reject) => {
  //初始化promise的状态为pending---->初始化状态
  console.log('1111');//同步执行
  //启动异步任务
  setTimeout(function () {
      console.log('3333');
      //resolve('成功了传过去的数据');//修改promise的状态pending---->fullfilled（成功状态）
      reject('失败了传过去的数据');//修改promise的状态pending----->rejected(失败状态)
  },2000);
});
promise.then((data) => {
  console.log('成功了：' + data);
}, (error) => {
  console.log('失败了：' + error);
});
console.log('2222');

    4、promise中如何 接收 设置的状态（接收异步操作成功或者失败的数据）？

    用promise.then()方法可以来接收成功或者失败的状态，promise.then()的参数是两个回调函数，一个是操作成功的回调函数，一个是操作失败的回调函数
    //创建一个promise实例对象
let promise = new Promise((resolve, reject) => {
  //初始化promise的状态为pending---->初始化状态
  console.log('1111');//同步执行
  //启动异步任务
  setTimeout(function () {
      console.log('3333');
      //resolve('成功了传过去的数据');//修改promise的状态pending---->fullfilled（成功状态）
      reject('失败了传过去的数据');//修改promise的状态pending----->rejected(失败状态)
  },2000);
});
promise.then((data) => {
  console.log('成功了：' + data);
}, (error) => {
  console.log('失败了：' + error);
});
console.log('2222');

    5、promise对象异步操作应用？

    使用promise可以封装处理异步的比如ajax、文件处理等耗时操作

    二、promise对象

    博客对应课程的视频位置：10、promise对象
    https://www.fanrenyi.com/video/24/211

    1、回调函数做异步

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、回调函数做异步</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 需求：
11 异步操作1做完了再做异步操作2，
12 异步操作2做完了再做异步操作3
13 
14 -->
15 <script>
16     // function async_fun(param){
17     //     setTimeout(()=>{
18     //        return '异步操作：'+param;
19     //     },1000);
20     // }
21     // console.log(async_fun(1));
22 
23     //想要接受到参数可以用回调函数
24     // function async_fun(param,callback){
25     //     setTimeout(()=>{
26     //         callback('异步操作：'+param);
27     //         //return '异步操作：'+param;
28     //     },1000);
29     // }
30     //
31     // async_fun(1,function (a) {
32     //     console.log(a);
33     // });
34 
35 
36     //异步操作1做完了再做异步操作2
37     //异步操作2做完了再做异步操作3
38 
39     // function async_fun(param,callback){
40     //     setTimeout(()=>{
41     //         callback('异步操作：'+param);
42     //     },1000);
43     // }
44 
45     //异步的流程来做异步的操作
46     // async_fun(1,function (a) {
47     //     console.log(a);
48     //     async_fun(2,function (a) {
49     //         console.log(a);
50     //         async_fun(3,function (a) {
51     //             console.log(a);
52     //             async_fun(4,function (a) {
53     //                 console.log(a);
54     //             });
55     //         });
56     //     });
57     // });
58 
59     //同步的流程来做异步的操作
60     // async_fun(1,function (a) {
61     //     console.log(a);
62     // });
63     // async_fun(2,function (a) {
64     //     console.log(a);
65     // });
66     // async_fun(3,function (a) {
67     //     console.log(a);
68     // });
69     // async_fun(4,function (a) {
70     //     console.log(a);
71     // });
72 
73 </script>
74 </body>
75 </html>

    2、promise对象

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>promise对象</title>
  6 </head>
  7 <body>
  8 <!--
  9 promise
 10 英 /ˈprɒmɪs/  美 /ˈprɑːmɪs/
 11 n. 许诺，允诺；希望
 12 vt. 允诺，许诺；给人以…的指望或希望
 13 vi. 许诺；有指望，有前途
 14 
 15 Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
 16 
 17 promise对象
 18 将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
 19 本质是状态机，通过设定不同的状态来执行不同的操作
 20 
 21 promise对象使用操作流程
 22 ES6的Promise是一个构造函数, 用来生成promise实例
 23 
 24 a、创建promise对象
 25     let promise = new Promise((resolve, reject) => {
 26         //初始化promise状态为 pending
 27       //执行异步操作
 28       if(异步操作成功) {
 29         resolve(value);//修改promise的状态为fullfilled
 30       } else {
 31         reject(errMsg);//修改promise的状态为rejected
 32       }
 33     })
 34 b、调用promise的then()
 35     promise.then(function(
 36       result => console.log(result),
 37       errorMsg => alert(errorMsg)
 38     ))
 39 
 40 
 41 promise对象的3个状态
 42 promise对象的本质是状态机，那么promise对象有哪些状态
 43 1、pending: 初始化状态
 44 2、fullfilled: 成功状态
 45 3、rejected: 失败状态
 46 
 47 promise中如何设置状态
 48 可以在promise的构造函数的参数对应的回调函数中设置，
 49 如果异步操作成功，可以通过resolve方法设置为成功状态（fullfilled）
 50 如果异步操作失败，可以通过rejected方法设置为失败状态（rejected）
 51 
 52 promise中如何接收设置的状态
 53 用promise.then()方法可以来接收成功或者失败的状态，
 54 promise.then()的参数是两个回调函数，
 55 一个是操作成功的回调函数，一个是操作失败的回调函数
 56 
 57 
 58 promise对象异步操作应用
 59 使用promise实现超时处理
 60 使用promise封装处理ajax请求
 61 
 62 
 63 -->
 64 <script>
 65     //promise对象最核心的：
 66     // 用同步的流程来解决异步的操作
 67 
 68     //promise的本质：
 69     //promise的本质是状态机，也就是通过设置不同的状态，
 70     // 来告诉用户异步操作是执行成功了还是执行失败了
 71 
 72     // function async_fun(param){
 73     //     setTimeout(()=>{
 74     //         return '异步操作：'+param;
 75     //     },1000);
 76     // }
 77     //Promise是一个构造函数
 78     //promise有一个参数，这个参数是回调函数
 79     //这个回调函数有两个参数：resolve, reject
 80     //resolve就是设置异步操作执行成功之后怎么做
 81     //reject就是设置异步操作执行失败之后怎么做
 82     //并且resolve和reject也是回调函数
 83 
 84     //resolve回调函数就是将promise的状态从pending状态设置为了成功 的状态resolved
 85     //resolve回调函数的另外一个作用就是向外面传递异步操作执行成功之后的数据
 86 
 87     //reject回调函数就是将promise的状态从pending状态设置为了失败 的状态rejected
 88     //reject回调函数的另外一个作用就是向外面传递异步操作执行失败之后的数据
 89     let promise=new Promise(function (resolve, reject) {
 90         setTimeout(()=>{
 91             //return '异步操作：'+param;
 92             //如果异步操作执行成功
 93             //resolve({data:'这是resolve返回的数据'});
 94             //如果异步操作执行失败
 95             reject('异步操作执行失败111');
 96         },1000);
 97     });
 98     console.log(promise);
 99     //promise的then方法可以接受到resolve和reject传递过来的数据
100     //then方法里面有两个参数，这两个参数都是回调函数
101     promise.then((data)=>{
102         console.log(data);
103     },(error)=>{
104         console.log(error);
105     });
106 
107 
108     //promise的状态
109     //初始状态：pending
110     //异步操作执行成功状态：resolved
111     //异步操作执行失败状态：rejected
112 
113 
114 
115 
116 </script>
117 </body>
118 </html>
     
  • 相关阅读:
    静态成员变量
    设计模式：空对象模式（Null Object Pattern）
    超详细LAMP环境搭建
    WCF 学习笔记之双工实现
    new和instanceof的内部机制
    C#开源磁盘/内存缓存引擎
    C++设计模式-Flyweight享元模式
    Javascript内存泄漏
    流量计数器
    运用Mono.Cecil 反射读取.NET程序集元数据
  • 原文地址：https://www.cnblogs.com/Renyi-Fan/p/12695719.html
Copyright © 2011-2022 走看看