Loading

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 => {

})

 

posted @ 2019-07-21 12:56  fsdffsdf  阅读(176)  评论(0)    收藏  举报