ES6 promise的使用

一、Promise介绍(ES6的特性)

Promise是ES6引入的异步编程解决方案。语法上promise是一个构造函数,用来封装异步操作,并返回成功或失败的结果。

Promise对象接收一个函数参数,这个函数接受两个回调函数类型的参数:resolve,reject(这里两个函数的名字一般默认写这个,也可以换成其他的函数名),分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。调用 resolve 返回一个成功状态的Promise对象,调用 reject 返回的就是一个失败状态的Promise对象。

案例一、Promise的使用

    // 一个测试函数
    function readfile(fileName) {
        if (fileName === "success") {
            return "读取文件成功";
        } else {
            throw "读取文件失败";
        }
    }
    /*
        promise的第一个简单案例
    */
    const p = new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(readfile("sucss"));
        },1000)
    })

    p.then(function(value){
        console.log(value)
    },function(error){
        console.error(error)
    });

当readfile 传success,执行结果如下:

 传其他字符串的时候

 案例二、Promise.prototype.then 的介绍

Promise.prototype.then 返回结果也是一个Promise对象,对象状态由回调函数的执行结果决定。
        1、如果回调函数返回的结果是一个非 Promise 类型的数据(不返回默认返回的是一个undifined),状态为成功
        2、是Promise 对象,则内部函数返回的promise对象状态,就是then函数返回的promise状态
        3、如果 thow 一个错误,也是一个失败的promise状态
   console.log("-------------- 案例二 ------------------")
   const p2 = new Promise(function(resolve,reject){
        resolve("成功")
    })
    console.log(p2)

    var result = p2.then(value =>{
        console.log("状态1:" + value)
        // 返回一个状态为失败的Promise对象
        return new Promise((resolve,reject) => {
            reject("失败")
        })
    },reason =>{
        console.error("状态1:" + reason)
    })
    console.log(result)
    var result2 = result.then(value =>{
        console.log("状态2:" + value)
        // 返回一个非Promise对象
        return "123"
    },error =>{
        console.error("状态2:" + error)
        // 返回一个非Promise对象
        return "456"
    })
    console.log(result2)
    var result3 = result2.then(function(value){
        console.log("状态3:" + value)
        // 不返回
    },function(reasion){
        console.log("状态3:" + value)
        // 不返回
    })
    console.log(result3)
    result3.then(function(value){
        console.log("状态4:" + value)
    },function(reasion){
        console.log("状态4:" + value)
    })

执行结果如下:

案例三

Promise.prototype.then 返回结果也是一个Promise对象,那么我么就可以继续在后面调用then方法

console.log("-------------- 案例三 ------------------")
const p3 = new Promise(function (resolve, reject) {
    resolve("成功")
})

p3.then(function(value){
    console.log("成功1" + value)
    return new Promise(function(resove,reject){
        reject("失败")
    },function(reasion){
        console.log("失败1" + reasion)
    })
}).then(function(value){
    console.log("成功2" + value)
},function(reasion){
    console.log("失败2" + reasion)
})

执行结果如下:

 四、案例四 Promise 对象catch方法

Promise 对象catch方法,实际是一个语法糖,相当与then方法不传第一个参数
console.log("-------------- 案例四 ------------------")
const p4 = new Promise(function (resolve, reject) {
    reject("出错啦")
})

p4.catch(function(reason){
    console.warn(reason)
})

执行结果如下:

 

posted @ 2024-05-14 22:59  远洪  阅读(20)  评论(0)    收藏  举报