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
}