promise解决回调地狱
2021-08-05 22:00:37
一个es6提出的新语法,用来优化异步代码
什么是pormisepormise:承诺
在生活中这是对将来要发生的事表示肯定,在上学期间给父母给老师承诺我一定会考出一个好成绩,在谈女朋友后给她承诺一定会给她一个美好的未来这都是pormise有了承诺肯定有成功和失败还有待定三种状态(resolved,rejected,pending)
在es6中,它是一种新增结构器,用来优化实现异步操作在没有他之前,JavaScript中的异步处理,大多数是利用回调函数来实现的.典型:(1)setTimeout(2)ajax(3)nodejs中文件读取.现在有了promise,就可以对这些异步操作进行改写
如何解决回调地狱?function?getData({?url,?success?})?{??????const?xhr?=?new?XMLHttpRequest()??????xhr.open('get',?url)??????xhr.onreadystatechange?=?function?()?{????????if?(this.readyState?===?4)?{??????????//?加载完成??????????const?d?=?JSON.parse(xhr.responseText);??????????success(d)????????}??????}??????xhr.send()????}getData({????????????url:'http://localhost:3000/get',????????????success:?(data)=>{????????????????getData({????????????????????url:'http://localhost:3000/getCategory?id='+data[0].id,????????????????????success:?data?=>?{????????????????????????getData({????????????????????????????url:'http://localhost:3000/getNews?id='+data[0].id,????????????????????????????success:?data?=>?{????????????????????????????????console.log(data)????????????????????????}????????????????????})????????????????}????????????})????????}})promise的基本使用构造器必须要定一个参数,如果不给就是报错.例如,newpromise()报错信息就是:Promiseresolverundefinedisnotafunction这不是一个函数
构造器的实参是一个函数,这个函数的特殊在于他有两个形参
在函数的内部,一般会执行异步代码,然后根据情况来调用
var?p1?=?new?Promise(function(resolve,reject){?????//异步操作?resolve(obj1)??或者?reject(obj2)});p1.then(function(rs){????//?如果p1的状态是resolved，则then中的函数????//会执行，且obj1的值会传给rs}).catch(function(rs){????//?如果p1的状态是reject，则catch中的函数????//????会执行，且obj2的值会传给rs}).finally(function(){????//?一定会执行的函数})三种状态和值上面我们也提到了promise的三种状态
pending:待定刚刚开始一个初始状态
resolved:成功表示承诺的东西实现了从pending状态到了resolved
rejected:表示承诺的东西失败了没有实现
三种状态的转换状态的转换
pending----resolve----resolved
pending----reject----rejected
三种状态转换是不可逆的
使用promise改造回调函数第一步:建立模板.这里的末班是指固定的套路:写一个空函数,在函数体中创建一个promise对象并返回
第二步:把一部功能写入构造器中,根据实际来决定是否调用resolve,reject
第三步:调用函数通过fnName().then().catch()结构来调用这个函数
改写上面代码function?getDataPromise(url)?{??????let?p?=?new?Promise((resolve,?reject)?=>?{????????const?xhr?=?new?XMLHttpRequest()????????xhr.open('get',?url)????????xhr.onreadystatechange?=?function?()?{??????????if?(this.readyState?===?4)?{????????????//?加载完成????????????const?d?=?JSON.parse(xhr.responseText);????????????resolve(d)??????????}????????}????????xhr.send()??????})??????return?p????}then的格式及执行逻辑p.then(函数1[,函数2])
第一个参数是resolved状态回调函数
第二个是rejected状态的回调函数
执行逻辑?
如果promise对象的状态是resolved，则then()会执行第一个函数，并传入当前的PromiseValue
如果promise对象的状态是rejected，则then()会执行第二个函数，并传入当前的PromiseValue
特别地，如果promise对象的状态是rejected，且此时then方法并没有设置第二个参数，就会向外抛出一个错误，错误的提示大约是Uncaught(inpromise)
catch的格式及用法catch是then(null,reject)的别名
一般与then一块使用,单独使用无意义
async-await的语法async,await是es7中的新增语法,用来改进异步代码写法,是promise升级版
async函数返回一个promise对象async函数内部return语句返回的值是promise对象的值
await命令?
await的外层函数必须有一个async
正常情况下,await命令后面是一个promise对象,返回该promise的值.如果不是promise对象就直接返回对应的值
使用async来优化回调地狱async?function?fn()?{??????const?res?=?await?getDataPromise('http://localhost:3000/get')??????console.log('第1次成功',?res)??????const?res1?=?await?getDataPromise('http://localhost:3000/getCategory?id='?+?res[0].id)??????console.log('第2次成功',?res1)??????const?res2?=?await?getDataPromise('http://localhost:3000/getNews?id='?+?res1[0].id)??????console.log('第3次成功',?res2)????}????fn()每日鸡汤想象你自己对困难作出的反应，不是逃避或绕开它们，而是面对它们，同它们打交道，以一种进取的和明智的方式同它们奋斗
原文：https://juejin.cn/post/7095248169830711327
热门标签
