文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

promise是不是es6的

2023-07-04 13:17

关注

本篇内容主要讲解“promise是不是es6的”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“promise是不是es6的”吧!

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

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.确定状态

在未决状态的处理函数中 如果发生未捕获的错误呀 那么状态就会有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.区别

函数前面多了一个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>

到此,相信大家对“promise是不是es6的”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯