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