es6语法转 es6语法promise

转载

mob6454cc6e409f 2024-08-31 21:00:53

文章标签 es6语法转 es6 javascript 前端回调函数 文章分类 架构后端开发

ES6之Promise

一、Promise是什么？

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

Promise 构造函数：Promise(excutor){}
Promise.prototype.then 方法
Promise.prototype.catch 方法

二、使用案例

1.Promise基本语法

<script>
        //实例化Promise对象
        const p = new Promise(function(resolve,reject){
            setTimeout(function(){
                //数据读取成功
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data); //通过调用resolve函数设置p的状态为成功

                //数据读取失败
                let err='数据读取失败';
                reject(err); //通过调用reject函数设置p的状态为失败
            },1000);
        });
        //调用 promise 对象的then方法
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.log(reason);
        })
    </script>

2.Promise读取文件

// 什么是fs模块 ==> File System

// fs模块是Node.js的一个核心模块，专门用来操作系统中的文件，
// 常用的操作方式是对文件的读取和写入使用require('fs')载入fs模块，
// 模块中所有方法都有同步和异步两种形式。
// 异步方法中回调函数的第一个参数总是留给异常参数（exception），
// 如果方法成功完成，该参数为null或undefined。异步写法demo:有一个回调函数。

// fs.readFile(文件路径，options,回调函数)

// 异步的读取指定路径的文件，回调函数在读取文件完成后触发

//1.引入 fs 模块
const fs = require('fs');

//2. 调用方法读取文件
// fs.readFile('./resourses/为学.md',(err,data)=>{
//     //如果失败，则抛出错误
//     if(err) throw err;
//     //如果没有出错，则输出内容
//     console.log(data.toString());
// });

// 3. 通过Promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile('./resources/为学.md',(err,data)=>{
        //如果失败
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.log("读取失败！");
});

3.Promise封装AJAX

<script>
        //接口地址: https://api.apiopen.top/api/sentences

        const p = new Promise((resolve,reject)=>{

            //1.创建对象
            const xhr = new XMLHttpRequest();

            //2.初始化
            xhr.open("GET","https://api.apiopen.top/api/sentences");

            //3.发送
            xhr.send();

            //4.绑定事件,处理响应结果
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    //判断响应状态码 200-299
                    if(xhr.status>=200 && xhr.status < 300 ){
                        //表示成功
                       resolve(xhr.response);
                    }else{
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        });
        // 指定回调
        p.then(function(value){
            console.log(value.toString());
        },function(reason){
            console.log("读取失败！");
        });
    </script>

4.Promise-then方法

<script>
        //创建promise对象
        const p  = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            },1000)
        });
        //调用 then 方法 then方法的返回结果是 Promise对象，对象状态由回调函数的执行结果决定
        // 1. 如果回调函数中返回的结果是 非promise 类型的属性，状态为成功,返回值为对象的成功的值
        const result= p.then(value =>{
            console.log(value);
            return '123';
        },reason =>{
            console.warn(reason);
        });

        console.log(result);
    </script>

5.Promise-catch方法

<script>
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //设置p对象的状态为失败,并设置失败的值
                reject("出错啦");
            },1000)
        });

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

        p.catch(function(reason){
            console.warn(reason);
        });
    </script>