Promise
Promise
- promise是异步编程的一种解决方案,简单说就是一个容器,里面保存着某个未来才会结束的事件
(通常为一个异步操作)的结果。从语法上pormise是一个对象,可以从改对象身上获取到异步操作的消息
从图片中可以看出Promsie是一个构造函数,原型上哟catch、finally
then等方法
promise共有3种状态
pending:初始状态,默认就是pending状态(表示异步操作进行中)。
fulfilled:如果异步成功,状态会从pending变成fulfilled(表示异步操作成功)
rejected: 如果异步操作失败,状态会从pending变成rejected(表示异步操作失败)
基本用法
//1.创建promise实例,在实例中执行异步操作(比如发送网络请求)
//2. 异步操作成功后,调用resolve函数传递数据
//3. 异步操作失败时,调用reject函数传递错误的信息
const promise = new Promise(function(resolve,reject){
//异步操作成功
if(/*异步操作成功*/){
resolve(value)
}else{
reject(error)
}
})
//4.使用promise实例的.then方法接收resolve或reject返回的数据
promise.then(function(value){
//此处数据即为resolve回来的数据
//success
},function(error){
// 此处为reject回来的数据
//failue
})
网络请求案例
//1.定义一个使用promise封装的请求函数,函数的内部返回一个promise实例
function fetch(){
return new Pormise(function(resolve,reject){
//请求正常
if(res.status ==1){
resolve(res.data)
}else{
reject(res.error)
}
})
}
fetch().then(function(res){
//res为resolve函数传递出的数据
})
.catch((error) => {
//err 为reject 函数传出的错误
})
解决回调地狱
如果有A、B、C三个请求,需要依赖A请求的数据,C需要依赖B请求的数据
如果按照以前的写法
function fetch(){
//A请求
axios.get("A")
.then((res) ={
//如果请求A成功
if(res.status ==1 ){
//B 请求
axios.get("B")
.then((res) => {
// 如果请求B 成功
if(res.status == 1){
//C请求
axios.get("C")
.then((res) => {
//请求完毕,执行后续逻辑
})
}
})
}
})
}
可以看出上述代码非常不利于阅读,通过Promise可以封装代码使用链式编程解决回调地狱
function fetch(url){
return new Promise(funciton(resolve,reject){
aixos.get(url).then((res) => {
if(res.status == 1){
resolve(res.data)
}else{
reject(res.data)
}
})
})
}
fetch("A").then(function(res){
//处理A正常请求的逻辑
return fetch("B")
// 这个返回一个新的promie实例,在后面的.then中可以得到该实例resolve或reject的对象
})
.then(function(res){
//处理B请求的逻辑
return fetch("C")
})
.then(function(){
//处理C请求的逻辑
})
多个异步请求结果组合的问题
如果有A、B、C,三个异步请求,需要三个请求的数据都回来之后,将数据整合后再渲染页面
这种需要使用Promise.all()
Promise.all方法用于将多个Promis实例,包装成一个新的Promise实例
function fetch(url){
return new Promise((resolve,reject) => {
axios.get(url).then((res) => {
if(res.status ==1){
resolve(res.data)
}
})
.catch((error) => {
if(error){
reject(res.error)
}
})
})
}
const p1 = fetch("A");
const p2 = fetch("B");
const P3 = fetch("C");
const p = Promise.all([p1,p2,p3]);
p.then(function(res) => {
//res此时是存放着p1,p2,p3请求的数组
})
asycn 与await 的使用
async 和 await 都为ES7中提供的异步操作关键字,本质是对promise的一种封装,
await 只能在 async 定义的函数内部,await 可以等待异步操作,并同步得到异步操作的返回值
//1.基于Promise 的异步操作
const fs = requrie("fs");
function getFileByPath(fpath){
return Promise(function(resolve,reject){
fs.readFile(fpath,'utf-8',(err,dataStr) => {
if(err) return reject(err)
resolve(dataStr)
})
})
}
//2.基于await 的异步操作问题(异步操作3依赖异步操作2,异步操作2依赖异步操作1)
//2.1 先使用async 定义异步操作
const start = asycn function(){
const n1 = await getFileByPath("./1.txt");
const n2 = await getFileByPath("./2.txt");
cosnt n3 = await getFileByPath("./3.txt");
// n3会等待n2 n2 会等待n1
}