zoukankan      html  css  js  c++  java
  • Promise

     Prosise 是异步编程的一种解决方案,从语法上讲,Promise是一个对象,它可以获取异步操作的消息。

    使用Promise主要有以下好处:

    1.可以避免多层一步调用嵌套问题(回调地狱)

    2.Promise 对象提供了简介的API,使得控制异步操作更加容易。

    语法:

    var a = new Promise( function (resolve , reject) {

      // resolve () 成功时的回调

      // reject ()失败时的回调

    })

    a.then( (data)=> {

      // 成功的回调

    }, (error)=>{

      // 失败的回调

    })

    案例:

     1 const fs = require('fs')
     2 
     3 function f1 () {
     4   return new Promise((resolve, reject) => {
     5     fs.readFile('./1.txt', 'utf8', (err, result) => {
     6       // 如果执行成功,用resolve 把结果传递出去。
     7       resolve(result)
     8     })
     9   })
    10 }
    11 
    12 function f2 () {
    13   return new Promise((resolve, reject) => {
    14     fs.readFile('./2.txt', 'utf8', (err, result) => {
    15       // 如果执行成功,用resolve 把结果传递出去。
    16       resolve(result)
    17     })
    18   })
    19 }
    20 
    21 function f3 () {
    22   return new Promise((resolve, reject) => {
    23     fs.readFile('./3.txt', 'utf8', (err, result) => {
    24       // 如果执行成功,用resolve 把结果传递出去。
    25       resolve(result)
    26     })
    27   })
    28 }
    29 
    30 f1().then((res1) => {
    31   console.log(res1)
    32   return f2()
    33 })
    34 .then((res2) => {
    35   console.log(res2)
    36   return f3()
    37 })
    38 .then((res3) => {
    39   console.log(res3)
    40 })

    案例: Promise 解决Ajax发送请求并处理回调地狱问题

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9 </head>
    10 
    11 <body>
    12 
    13 </body>
    14 <script>
    15   function getData(url) {
    16     var p = new Promise((resolve, reject) => {
    17       var xhr = new XMLHttpRequest()
    18       xhr.onreadystatechange = () => {
    19         if (xhr.readyState !== 4) return
    20         if (xhr.readyState === 4 && xhr.status === 200) {
    21           resolve(xhr.responseText)
    22         } else {
    23           reject('错误信息')
    24         }
    25       }
    26       xhr.open('get', url)
    27       xhr.send(null)
    28     })
    29     return p
    30   }
    31 
    32   getData('http://localhost:3000/data')
    33     .then(res => {
    34       console.log('success', res)
    35       return getData('http://localhost:3000/data1')
    36     }, error => {
    37       console.log('error', error)
    38     })
    39     .then(res => {
    40       console.log(res)
    41       return getData('http://localhost:3000/data2')
    42     })
    43     .then(res => {
    44       console.log(res)
    45     })
    46 </script>
    47 
    48 </html>

    Promis 常用的API

    对象方法:

    Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果。

    Promise.all([p1,p2,p3]).then(res => {

    })

    Promise.race() 并发处理多个异步任务,只要一个任务完成就能得到结果。

    Promise.race([p1,p2,p3]).then(res => {

    })

  • 相关阅读:
    大话设计模式笔记 装饰模式
    大话设计模式笔记 依赖倒转原则
    大话设计模式笔记 单一职责原则 开放-封闭原则
    Effective Java 英文 第二版 读书笔记 Item 5:Avoid creating unnecessary objects.
    Effective Java 英文 第二版 读书笔记 Item 4:Attempting to enforce noninstantiability by making a class abstract does not work.
    Effective Java 英文 第二版 读书笔记 Item 3:Enforce the singleton property with a private constructor or an enum type.
    Effective Java 英文 第二版 读书笔记 Item 2:Consider a builder when faced with many constructor parameters.
    大话设计模式笔记 策略模式
    大话设计模式笔记 简单工厂模式
    jvm的垃圾回收算法
  • 原文地址:https://www.cnblogs.com/liea/p/11220896.html
Copyright © 2011-2022 走看看