promise
promise
一个es6提出的新语法,用来优化异步代码
什么是pormise
- pormise:承诺
-
在生活中这是对将来要发生的事表示肯定,在上学期间给父母给老师承诺我一定会考出一个好成绩,在谈女朋友后给她承诺一定会给她一个美好的未来这都是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的基本使用
-
构造器必须要定一个参数,如果不给就是报错.例如,new promise()报错信息就是:Promise resolver undefined is not a function这不是一个函数
-
构造器的实参是一个函数,这个函数的特殊在于他有两个形参
-
在函数的内部,一般会执行异步代码,然后根据情况来调用
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 (in promise)
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()
每日鸡汤
想象你自己对困难作出的反应,不是逃避或绕开它们,而是面对它们,同它们打交道,以一种进取的和明智的方式同它们奋斗