1、Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大。
ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
2、promise是为解决异步处理回调金字塔问题而产生的 3、Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了,then是成功回调,catch是失败回调。 4、以下是代码和运行结果: (1) /**
new Promise 定义一个新的Promise对象接受一个回调函数作为参数参数一:代表成功之后的回调函数参数二:代表失败之后的回调函数*/
const p = new Promise(function(resolve,reject){ setTimeout(()=>{ resolve('两秒结束了!') },2000) });以上是在终端执行,也可以在一个页面中引入也可以直接执行: (2)
const p = new Promise(function(resolve,reject){ setTimeout(()=>{ resolve('两秒结束了!') },2000) }); const p5 = new Promise(function(r,f){ setTimeout(()=>{ r('五秒结束了!') },5000) });(3)
const p = new Promise(function(resolve,reject){ setTimeout(()=>{ resolve('两秒结束了!') },2000) }); const p5 = new Promise(function(r,f){ setTimeout(()=>{ r('五秒结束了!') },5000) }); p.then(r=>{ console.log(r) //return '哈哈哈哈' }).then(r=>{ console.log(r)//这个结果会是undefined,如果上一个then有返回值则会输出返回值 });//p.then代表成功之后执行 //若把r换成function,有一样的效果,唯一区别就是this的指向变了 //运行看结果则在终端输入 node 文件名若把return '哈哈哈哈’的注释去掉则:
(4)
const p = new Promise(function(resolve,reject){ setTimeout(()=>{ resolve('两秒结束了!') },2000) }); const p5 = new Promise(function(r,f){ setTimeout(()=>{ r('五秒结束了!') },5000) }); p.then(r=>{ console.log(r) return '哈哈哈哈' }).then(r=>{ console.log(r)//这个结果会是undefined,如果上一个then有返回值则会输出返回值 });//p.then代表成功之后执行 //若把r换成function,有一样的效果,唯一区别就是this的指向变了 //运行看结果则在终端输入 node 文件名 p5.then(function(r){ console.log(r) }) const pAll = Promise.all([p,p5]);//d等待所有promise对象执行完之后出发 pAll.then(res=>{ console.log(res)//每一个promise对象返回值组成的一个数组 })(5)
const p = new Promise(function(resolve,reject){ setTimeout(()=>{ resolve('两秒结束了!') },2000) }); const p5 = new Promise(function(r,f){ setTimeout(()=>{ r('五秒结束了!') },5000) }); p.then(r=>{ console.log(r) return '哈哈哈哈' }).then(r=>{ console.log(r)//这个结果会是undefined,如果上一个then有返回值则会输出返回值 });//p.then代表成功之后执行 //若把r换成function,有一样的效果,唯一区别就是this的指向变了 //运行看结果则在终端输入 node 文件名 p5.then(function(r){ console.log(r) }) const pAll = Promise.all([p,p5]);//d等待所有promise对象执行完之后出发 pAll.then(res=>{ console.log(res)//每一个promise对象返回值组成的一个数组 }) const pR = Promise.race([p,p5]); pR.then(res=>{ console.log('Race完了--start') console.log(res) console.log('Race完了--end') })它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行
解决异步调用的写法看起来比较丑陋,链式调用多了会出现问题等问题 是promise的一个替代品,async 就是将函数返回值使用 Promise.resolve() 包裹了下,和 then 中处理返回值一样,并且 await 只能配套 async 使用
async 和 await 可以说是异步终极解决方案了,相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码,毕竟写一大堆 then 也很恶心,并且也能优雅地解决回调地狱问题。当然也存在一些缺点,因为 await 将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。
在新版本的js中引入一个方法 async/await 用来做异步调用 async/await调用有两个特点: 1、await必须放在async关键字修饰的function中 2、await后面必须跟着一个Promise对象
这样的写法有一个好处: 使用async/await可以像写同步方法(顺序写)一样写异步请求
function getData(){ var p = new Promise((r,j)=>{ setTimeout(function(){ r('3秒钟完了!!!') },3000); }); return p; } async function initPage(){ const result = await getData();//等待getDate()方法执行完之后 console.log(result) } initPage() //隔了3秒之后打印出‘3秒钟完了!!!’例子: request_from_server.js
const axios = require('axios') const getProducts = () => { return axios.get('http://api.cat-shop.penkuoer.com/api/v1/products') } //另一种写法 //function getProducts(){ // return axios.get('http://api.cat-shop.penkuoer.com/api/v1/products') //} module.exports ={ getProducts };在入口文件index.js中调用上面接口的代码: 先引入 const api = require('./api/request_from_server') 然后在页面中使用:
app.get('/products',async(req,res)=>{ const result = await api.getProducts(); res.json({ code:'sucess', products:result.data, }) // res.send('2222') })//上面的那个get请求也可以写成下面那种形式
app.get('/products-2',(req,res)=>{ api.getProducts().then(d=>{ res.json({ code:'success', products:d.data, }) }) })然后在终端输入nodemon index.js(入口文件一般是index.js) 在浏览器中访问服务器便能得到结果
有关Promise详情:https://www.cnblogs.com/qinmengjiao123-123/p/8321382.html