Promise 学习心得

2019-08-14 10:24:46来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  当了这么久码农到今天没事才开始去深究 Promise 这个对象

  • 什么是 Promise, Promise 有什么用?

  在写代码的时候多多少少都有遇见过地狱式的回调 代码看起来没问题就是有点乱,Promise 这个东西就是为了解决回调嵌套而生的 Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。

  • 知道 promise  ,那应该怎样用呢?

  举个最简单的例子利用 JQuery 返回一个 Promise 对象,实现 .then 对 ajax 进行调用

 

1   function getData(path,type='get',dataType='json'){
2       return  $.ajax({
3             url:path,
4             type:type,
5             dataType:dataType
6         })
7     }

 

   那如果我用不了 JQuery 怎么办, 我们可以直接用原生 Promise 来实现

 

 1 function getData(url) {
 2     return new Promise(function (resolve, reject) {
 3         var XHR =new XMLHttpRequest() ;
 5         XHR.onreadystatechange = function () {
 7             if (XHR.readyState == 4) {
 8                 if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
 9                     try {
11                         var response = JSON.parse(XHR.responseText);
12                         resolve(response);
13                     } catch (e) {
14                         reject(e);
15                     }
16                 } else {
17                     reject(new Error("Request was unsuccessful: " + XHR.statusText));
18                 }
19             }
20         }
21         XHR.open('GET', url , true);
22         XHR.send(null);
23     })
24   }

 

  • 最后我们来说一下 Promise 正常场景的两种使用方法

    1. 回调后调用函数,第一个函数报错后面的函数就可以不用执行。

 

 1       getData('./data.json',).then((data)=>{
 2           console.log(data)
 3           getData('./data1.json',)
 4         }).then(data=>{
 5           console.log(data)
 6           getData('./data2.json',)
 7         }).then(data=>{
 8           console.log(data)
 9         }).catch(err=>{
10           console.log(err)
11         })

    

    2. 回调后调用函数,第一个函数错误后后面的函数还要继续执行。

 

 1          getData('./data.json',).then((data)=>{
 2           console.log(data)
 3           getData('./data1.json',)
 4         }).catch(err=>{
 5           console.log(err)
 7           getData('./data1.json',)
 8         }).then(data=>{
 9           console.log(data)
10           getData('./data2.json',)
11         }).then(data=>{
12           console.log(data)
13         })    

 

  总的来说 Promise 有什么用呢?代码量没减少,写起来还复杂。 你可以这样认为 Promise  没啥用就是让你的代码看起来不那么别扭,没有了回调地狱让你的代码可读写更强,看起来心情更好,心情好代码就打的快,代码打的快就有时间去学习,有时间学习就可以跳槽,就加工资。简单说 Promise 就是一个花瓶。中看!!


原文链接:https://www.cnblogs.com/ZhugeXican/p/11286100.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:crypto 的使用方法和说明

下一篇:vue项目中导出Excel文件功能的前端代码实现