Vue第5天知识点：promise：异步函数与回调函数的说明嵌套、promise基本语
法、。。。
promise
异步函数与回调函数的说明
异步函数: 定时器setTimeout, ajax (异步函数的执⾏, 不会阻塞主线程代码的执⾏)
回调函数:
1. 把⼀个函数当成参数传递, 将来特定的时机调⽤, 这个函数就叫回调函数
2. 什么时候会⽤到回调函数, 异步的时候 ajax success error
console.log(1)
setTimeout(function(){
console.log(2)
setTimeout(function(){
console.log(4)
},1000)
console.log(5)
},1000)
console.log(3)
答案是：13254
回调函数的问题:
1. 回调函数的阅读性不好, 回调不会⽴马执⾏
2. 回调函数如果有⼤量的嵌套, 可维护性差 (回调地狱)
promise 就是为了解决回调函数嵌套的问题⽽存在的
回调函数的嵌套问题
⽂件读写, 也是异步的
按照顺序依次读取 - a, b, c, d 四个⽂件
回调地狱: 回调函数嵌套回调函数, 嵌套多了, 将来就很难维护, 很难理清顺序
promise 的基本语法
promise:
1. 创建promise对象
resolve 是成功的时候, 需要调⽤的函数
reject 是失败的时候, 需要调⽤的函数
const p = new Promise(function(resolve,
reject) {
/
/ ⾥⾯⼀般封装的是异步函数的处理
})
2. 使⽤promise对象
p.then(成功的函数).catch(失败的函数)
代码演⽰：
// 1. 创建promise对象
// 2. 使⽤promise对象
const fs =require('fs')
// promise承诺, ⼀般承诺的是将来的事情, 可能成功也可能失败
// 1. 创建
const p =new Promise(function(resolve, reject){
/
/ promise中⼀般封装⼀个异步的操作⽐如: ajax, 读写⽂件
// resolve 和 reject 都是 promise 给你提供好的函数
// resolve是需要在成功的时候调⽤的函数
// reject是需要在失败的时候调⽤的函数
if(err){
reject(err)
}else{
resolve(data)
}
})
})
// 2. 使⽤promise对象
// axios({ .. }).then(成功的函数).catch(失败的函数)
// p.then(成功的函数).catch(失败的函数)
p.then(function(data){
console.log(data)
}).catch(function(err){
console.log(err)
})
⽬的: promise 是书写异步代码的另⼀种⽅式, 解决回调函数嵌套的问题
1. 如何创建⼀个 promise 对象
const p =new Promise((resolve, reject)=>{
promise内部⼀般可以封装⼀个异步操作
成功调⽤ resolve
失败调⽤ reject
})
2. 如何使⽤⼀个 promise 对象
2.使⽤ promise 对象
.then(res =>{...})处理成功
.catch(res =>{...})处理失败
promise有三种状态
pending: 等待 (进⾏中)
fulfilled: 成功 (已完成), 调⽤了 resolve, promise的状态就会被标记成成功rejected: 失败 (拒绝), 调⽤了 reject, promise的状态就会被标记成失败
⼩tips: ⼀旦promise的状态发⽣变化, 状态就会被凝固
代码演⽰：
const fs =require('fs')
// promise对象, 是有三个状态的
// pending 等待(进⾏中)  默认的状态
// fulfilled 成功
// rejected  失败(被拒绝)
// 1. resolve是成功的时候需要执⾏的函数, 会将promise的状态修改成fulfilled //    将来才会执⾏ .then 中配置的函数
// 2. reject是失败的时候需要执⾏的函数, 会将promise的状态修改成rejected //    将来才会执⾏ .catch
中配置的函数
// 3. promise的状态只能修改⼀次, ⼀旦被修改了, 就会状态凝固 (应付⾯试题) //    所以多次调⽤ resolve 或者 reject 是没有任何意义的
const p =new Promise(function(resolve, reject){
if(err){
reject(err)// rejected
// resolve(err) // ⽆意义的代码
}else{
resolve(data)
}
await和async使用方法
})
})
p.then(function(data){
console.log(data)
}).catch(function(err){
console.log(err)
})
promise 解决回调地狱的问题
如果有多个 promise 需要处理, ⽀持链式编程
const p =new Promise(function(resolve, reject){ // promise 内部会封装⼀个异步的操作
// resolve: 成功的时候, 需要调⽤
// reject: 失败的时候, 需要调⽤
if(err){
reject(err)
}else{
resolve(data)
}
})
})
const p2 =new Promise(function(resolve, reject){  fs.readFile('b.txt','utf8',(err, data)=>{
if(err){
reject(err)
}else{
resolve(data)
}
})
})
....
p.then(res =>{
console.log(res)
return p2
}).then(res =>{
console.log(res)
return p3
}).then(res =>{
console.log(res)
return p4
}).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
promise 解决回调地狱优化
function read(filename){
return new Promise(function(resolve, reject){
// promise 内部会封装⼀个异步的操作
// resolve: 成功的时候, 需要调⽤
// reject: 失败的时候, 需要调⽤
if(err){
reject(err)
}else{
resolve(data)
}
})
})
}
read('a.txt').then(res =>{
console.log(res)
return read('b.txt')
}).then(res =>{
console.log(res)
return read('c.txt')
}).then(res =>{
console.log(res)
return read('d.txt')
}).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
promise 封装 ajax 的发送 (⾃⼰封装⼀个简化的axios)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。