• 技术文章 >web前端 >前端问答

    promise是es6的吗

    青灯夜游青灯夜游2022-11-03 19:20:55原创136

    是的。promise是ECMAScript 6新增的引用类型,表示一个异步操作的最终完成或者失败。promise是解决异步编程调用代码逻辑编写过于复杂的问题的,当网络请求非常复杂时,就会出现回调地狱,这样如果将这些代码写在一起就会看起来很复杂,且不利于阅读,如果用promise的话就会让代码看起来更加美观优雅。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    ECMAScript 6 增加了对 Promises/A+ 规范的完善支持,即 Promise 类型。一经推出,Promise 就大受欢迎,成为了主导性的异步编程机制。所有现代浏览器都支持 ES6 期约,很多其他浏览器 API 也以期约为基础。

    Promise 是 ECMAScript 6 新增的引用类型,表示一个异步操作的最终完成或者失败。

    一、promise函数是干什么的

    promise函数是解决异步编程调用代码逻辑编写过于复杂的问题的,当网络请求非常复杂时,就会出现回调地狱,这样如果将这些代码写在一起就会看起来很复杂,且不利于阅读,如果用promise的话就会让代码看起来更加美观优雅

    二、Promise三种状态

    首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
    异步操作之后会有三种状态

    pending:等待状态,比如正在进行网络请求,或者定时器没有到时间。
    fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
    reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

    三、实现

    1,then和catch

    1.出于未决状态的函数是同步的 会立即执行
    2.then和catch是异步的 就算promise对象里面没有异步操作 让then方法或者catch立即执行 那么 这里两个方法或被加入到事件队列中等待执行

    //参数 函数(resolve,reject)
        new Promise((resolve, reject) => {
            setTimeout(() => {
                //请求成功的时候调用resolve
                resolve('22222')
                //请求失败的时候调用reject
                reject('error message')
            }, 1000)
        }).then((data) => { //请求成功处理函数
            console.log(data)
        }).catch((err) => { //请求失败处理函数
            console.log(err)
        })

    2.确定状态

    1、在未决状态的处理函数中 如果发生未捕获的错误呀 那么状态就会有pending 直接变成 rejected状态 并且可以被catach捕获

    var pro = new Promise((resolve, reject) => {
                throw new Error("123");
    
                // try{
                //     throw new Error("123"); 
                // } catch(e) {}
    
                resolve(12);
                reject(34);
            })
    
            // pro.then(data => {
            //     console.log(data);
            // }, err => {
            //     console.log(err);
            // })
    
    
            console.log(pro);
            
    
            pro.then(data => {
                console.log(data);
                
            })
    
            pro.catch(data => {
                console.log(data);
                
            })

    3.async和await

    1.使用Promise:

    const makeRequest = () =>
            getJSON().then(data => {
                console.log(data)
                return "done"
            })
    
        makeRequest()

    2.使用Async:

    async和await 是ES7提出来的
    async作用:简化函数返回值中promise对象的创建
    一般情况下, async写在函数的最前面,被修饰的函数的返回值 ,一定是promise对象。只有在某些特殊情况下 才会手动返回一个promise对象。

    作用:和promise一样 解决异步问题 但是他的好处在于 让异步代码和同步的一样!!
    注意点 : 同步方法我们拿到结果 是通过返回值,异步方法拿到结果,是靠回调函数。

    async 和await使用的基本语法 :

    const makeRequest = async () => {
     // await getJSON()表示console.log会等到getJSON的promise成功reosolve之后再执行。
            console.log(await getJSON)
            return "done"
        }
    
        makeRequest()

    3.区别

    1.函数前面多了一个aync关键字。await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise,该promise的reosolve值就是函数return的值。(示例中reosolve值就是字符串”done”)
    2.我们不能在最外层代码中使用await,因为不在async函数内。

    四.promise方法

    var r1 = new Promise((resolve,reject) => {
                setTimeout(function(){
                    resolve("我是第一个请求");
                },1000)
            })
            var r2 = new Promise((resolve,reject) => {
                setTimeout(function(){
                    resolve("我是第二个请求");
                },3000)
            })
            var r3 = new Promise((resolve,reject) => {
                setTimeout(function(){
                    resolve("我是第三个请求");
                },4000)
            })
            var r4 = new Promise((resolve,reject) => {
                setTimeout(function(){
                    resolve("我是第四个请求");
                },500)
            })

    1.all方法

    有时候我们需要等待两个或者多个请求都成功返回了再进行下一步操作,promise 的all方法是等所有的异步请求完成之后在进行下一步回调

    Promise.all([r1,r2,r3,r4]).then(data => {
                console.log(data);
                
            })

    2.race方法

    请求同时发送出去 谁先回来 就是用谁的数据。

    Promise.race([r1,r2,r3,r4]).then(data => {
               console.log(data);
               
           })

    五.promise封装ajax案例

    <script>
           function toData(obj) {
                   
                   // 声明一个数组 来装每一组的数据
                   var arr = [];
                   if(obj !== null) {
                       for(var key in obj) {
                           let str = key + "=" + obj[key];
                           arr.push(str);
                       }
                       return arr.join("&");
                   }
           }
    
           function ajax(obj) {
               return new Promise(function(resolve, reject) {
                   // 给ajax所需要的参数设置默认值
                   obj.type = obj.type || "get";
                   obj.async = obj.async|| "true";
                   obj.dataType = obj.dataType || "json";
                   obj.data = obj.data || null;
    
                   // 开始发送ajax请求
                   var xhr;
    
                   if(window.XMLHttpRequest) {
                       xhr = new XMLHttpRequest();
                   } else {
                       // IE低版本的浏览器
                       xhr = new ActiveXObject("Microsoft.XMLHttp");
                   }
    
                   // 判断是post请求 还是get请求
                   if(obj.type === "post") {
                       xhr.open(obj.type, obj.url, obj.async);
                       // 设置请求头
                       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
                       xhr.send(toData(obj.data));
    
                   } else {
                       var url = obj.url + "?" + toData(obj.data);
                       xhr.open(obj.type, url, obj.async);
                       xhr.send();
                   }
    
                   // 处理响应体
                   xhr.onreadystatechange = function() {
    
                       if(xhr.readyState == 4) {
                           if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                               resolve(JSON.parse(xhr.responseText));
    
                           } else {
                               reject(xhr.status);
                           }
                       }
                   }
               })
           }
    
           ajax({
               url : "./data.php",
               data : {
                   name : "jack",
                   age : 16
               }
           }).then(res => {
               console.log(res);
               
           }, err => {
               console.log(err);
               
           })
       
       </script>

    【相关推荐:javascript视频教程web前端

    以上就是promise是es6的吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:ES6 promise
    上一篇:es6 map有序吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• es6数组怎么删除最后一个元素• es6怎么修改数组的值• es6 map成员是唯一的么• es6怎么实现字符串反转• es6怎么找出2个数组中不同项
    1/1

    PHP中文网