Vue promise对象_vue promise撖寡情-CSDN博客

本文链接：https://blog.csdn.net/qq_53665850/article/details/128191730

一、初体验

promise实现形式：promise(resolve,reject)
resolve 解决  函数类型的数据
reject  拒绝  函数类型的数据

resolve表示成功的回调，reject表示失败的回调

具体实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button按钮样式</title>
    <style>
        .button1 {
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            padding: 16px 32px;
            text-align: center;
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
            border-radius:5px;
        }
        .button1:hover {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<button class="button1" id="btu">Green</button>



<script>
    const btn = document.querySelector('#btu')
    //随机数函数
    function rand(min,max){
        var random =Math.floor(Math.random()*(max-min+1))+min
        return random
    }
    btn.addEventListener('click',function (){
        //promise实现形式
        //resolve 解决  函数类型的数据
        //reject  拒绝  函数类型的数据
        const p = new Promise((resolve,reject) =>{
            setTimeout(()=>{
                let n =rand(1,100)
                if(n<=30){
                    resolve(n) //将promise对象的状态设置为【成功】
                }else{
                    reject(n)  //将promise对象的状态设置为【失败】
                }
            },1000)
        })

        p.then((value)=>{
            console.log('成功！随机数为'+ value)
        },(reason)=>{
            console.log('失败！随机数为'+reason)
        })
    })

</script>
</body>
</html>

二、promise运用文件读取

const fs = require('fs')
//回调函数形式
// fs.readFile('./resoures/content.txt',  (err, data)=> {
//     if (err) {
//         return console.error(err)
//     }
//     console.log('异步读取：' + data.toString())
// })

//promise形式
let p = new Promise((resolve,reject)=>{
    fs.readFile('./resoures/content.txt',  (err, data)=>{
        //出错
        if(err) reject(err)
        //如果成功
        resolve(data)
    })
})
//调用then
p.then(value => {
        console.log(value.toString())
    }, reason => {
    console.log(reason)
})