Promise学习(1)

Promise学习(1)

异步编程

1. fs文件操作

   require('fs').readFile('./index.html',(err,data)=>{})
   

2. 数据库操作

3. AJAX

   $.get('/server',(data)=>{})
   

4. 定时器

   setTimeout(()=>{},2000)
   

Promise之前异步操作全部都用的回掉函数的形式。

为什么要用Promise进行异步操作

1. 指定回掉函数的方式更加灵活（启动异步任务->返回promise对象->给promise对象绑定回调函数）

2. 支持链式调用，可以解决回调地狱的问题（回掉地狱：不便于阅读，不便于异常处理）

Promise初体验

    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1) + m - 1);
        }
        const btn = document.querySelector('#btn');
        btn.addEventListener('click', function () {
            //回调函数实现
            /* setTimeout(()=>{
                let n = rand(1,100);
                if(n<=30){
                    alert("congralation")
                }else{
                    alert("sorry")
                }
            },2000); */
            //Promise实现
            //resolve和reject都是函数类型的数据
            //封装异步操作
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    let n = rand(1, 100);
                    if (n <= 30) {
                        resolve(n);
                    } else {
                        reject(n);
                    }
                }, 1000);
            })

            //调用then
            p.then((value)=>{
                //成功时候的回调
                alert("congralation，中奖数字为"+value)
            },(reason)=>{
                //失败之后的回调
                alert("sorry,中奖数字为"+reason)
            });
        })
    </script>

Promise封装文件操作

const fs = require('fs');
const { resolve } = require('path');
//fs模块回调函数的形式
fs.readFile('./resource/content.txt',(err,data)=>{
    if(err) throw err;
    console.log(data.toString());
})
//Promise形式
let p = new Promise((resolve,reject)=>{
    fs.readFile('./resource/content.txt',(err,data)=>{
        if(err) reject(err);
        resolve(data);
    })
})

p.then((value)=>{
    console.log(value.toString())
},(reason)=>{
    throw reason
})

Promise封装AJAX

//创建Promise对象
            const p = new Promise((resolve,reject)=>{
                //创建对象
                const xhr = new XMLHttpRequest();
                //初始化
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                //发送
                xhr.send();
                //处理响应结果
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if(xhr.status>=200&&xhr.status<300){
                            resolve(xhr.response)
                        }else{
                            reject(xhr.status)
                        }
                    }
                }
            })

            p.then((value)=>{
                console.log(value);
            },(reason)=>{
                console(reason)
            })

Promise可以在使用的时候再设定回调函数

/* 
封装一个函数mineReadFile读取文件内容
参数：path文件路径
返回：promise对象
*/
function mineReadFile(path){
    //返回一个对象
    return new Promise((resolve,reject)=>{
        //读取文件
        require('fs').readFile(path,(err,data)=>{
            if(err) reject(err);
            resolve(data);
        });
    });
}

//灵活使用，可以在使用的时候调用回调函数，不需要写任务的时候就指定回调函数
mineReadFile('./resource/content.txt')
.then(value=>{
    console.log(value.toString())
},reason=>{
    console.log(reason)
});