promise加箭头函数处理异步结果

缺乏、安全感 2022-06-09 08:51 200阅读 0赞

## Promise对象 ##

es6中新增了promise对象，为了处理异步消息而生，在此之前处理异步拿到的数据就是回调嵌套回调，有了Promise我们就可以在需要使用异步处理结果的地方调用Promise.then(func)

### Promise定义 ###

摘自 阮一峰 ECMAScript 6 入门

> 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

在js中很经典的异步就是ajax请求了，我在第一个项目当中用到ajax原生请求，处理ajax请求的结果全在回调函数当中进行，判断状态码，作出相应的处理，在不同的状态码下的处理又非常的多，然后就是一层层嵌套，还蛮爽的==

function getMessage(url,data) {
          
    var request = new XMLHttpRequest();
    request.open("POST", url);    
    request.responseType = "json";    
    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');    
    request.send(data); 
    request.onload = function () {
        
            if (this.status === 200) {            
                if (this.response.code === 200) { 
                    this.response.data.forEach(function (obj) {
        
                        //此处处理拿到的数据               
                   })            
                } else                
                   //此处处理后端返回错误        
            } else 
              //此处处理网络请求错误    
        };   
    }

基本上整个模块的操作都在回调里面做了，因为请求的结果数据就在那里，异步的结果是不确定的，只能在回调函数做各种各样的处理。

### Promise的三种状态 ###

一个 Promise有以下几种状态:

*  pending: 初始状态，不是成功或失败状态。
 *  fulfilled: 意味着操作成功完成。
 *  rejected: 意味着操作失败。

描述：  
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers ）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。

我们给出一个用promise对象封装的一个ajax请求：

function getDate(url, data) {
        
         return new Promise(function(resolve, reject) {
        
             var request = new XMLHttpRequest(); 
             request.open("POST", url);
             request.responseType = "json"; 
             request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');                    
             request.send(data);                 
             request.onload = function() {
                            
                 if (this.status === 200) {
                     resolve(this.response);
                 } else {    
                     reject(this.status);
                 }
             }
        })
    }
    
    // 在需要处理数据的地方
    getDate(url, data).then(function(response) {
        
        /此处处理拿到的数据 
    }).catch(function(err){
        
        //此处处理错误
    })

上面的示例就是用Promise对象封装了ajax请求,解决了在回调里面处理所有结果的尴尬。

### axios请求 ###

我们可以不用人工封装，而是借助已经封装好的模块axios去请求，原理看着都一样，甚至用起来和我们自己封装的都一样

function getDate(url, data) {
        
        axios.defaults.baseURL = url;  
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
        //此处放了一个get请求，就没用到data
         axios.get('/articles/articleList').then(function(response) {
        
             if(response.status == 200) {
                 if(response.data.code == 200) {
                      //处理
                  } else {
                      //此处处理后端返回状态错误
                  }
            }
        }).catch(function(err) {
        
            //此处处理请求错误
        });
    }

这里我要隆重的说一句，不管这个Promise对异步的结果做了什么，异步还是异步，你想把异步执行的结果传出来还是不可能，除非用generator或者async转成同步，显然把他转成同步不合算。  
接下来我们就用箭头函数加promise的方法解决结果不能传出去的问题。

## 箭头函数 ##

ES6大法的箭头函数，说一点：箭头函数的this。  
箭头函数的this是绑定外部环境的，咱们直接看例子

var name = "zhangchi";
    var Obj = {
        name: "chichi",
        fun1: function(){
            console.log(this.name);
        },
        fun2: () => {
            console.log(this.name);
        }
    }
    
    Obj.fun1(); // chichi
    Obj.fun2(); //zhangchi

看完这个例子大致就知道，箭头函数和普通函数的this指向是不同的，所以不要在一个类里面用箭头函数。

## 终极解决方案 ##

var data = {}; //接收异步返回的结果
    function getDate(url, data) {
        axios.defaults.baseURL = url;  
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
         axios.get('/articles/articleList').then((response) => {
             if(response.status == 200) {
                 if(response.data.code == 200) {
                      this.data = response.data.data;
                  } else {
                      //此处处理后端返回状态错误
                  }
            }
        }).catch(function(err) {
            //此处处理请求错误
        });
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise 异步函数顺序问题解决

在项目中写到for循环结束之后再去调用一个函数我用的是vue 记录一下 //这里是循环得到一些数据之后再进行函数调用 const _arr=[]

Bertha 。/ 2023年03月01日 05:55/ 0 赞/ 21 阅读

相关 promise异步加载图片（marksheng）

promise异步加载图片：//函数直接调用，在.then中进行成功的操作，在.catch中进行失败的各种操作. func

墨蓝/ 2023年01月02日 09:30/ 0 赞/ 120 阅读

相关 promise加箭头函数处理异步结果

Promise对象 es6中新增了promise对象，为了处理异步消息而生，在此之前处理异步拿到的数据就是回调嵌套回调，有了Promise我们就可以在需要使用异步处理结果

缺乏、安全感/ 2022年06月09日 08:51/ 0 赞/ 201 阅读

相关异步处理获取结果集异步接口Future

Future接口是Concurrent包下的,关于他的解释,源码给的解释是 package java.util.concurrent; /

港控/mmm°/ 2022年05月16日 15:24/ 0 赞/ 198 阅读

相关 typescript promise异步函数操作

原文出处：[https://blog.csdn.net/weixin\_39169232/article/details/74748150][https_blog.csdn.n

忘是亡心i/ 2022年05月08日 08:00/ 0 赞/ 230 阅读

相关箭头函数和promise对象

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

太过爱你忘了你带给我的痛/ 2022年02月04日 07:21/ 0 赞/ 200 阅读

相关 ajax箭头函数,JS箭头函数

一、定义 const aa = (参数列表) => \{\}x => x \ x 相当于function (x) \{ return x \ x; \} 二、参数问题

缺乏、安全感/ 2021年09月09日 08:14/ 0 赞/ 590 阅读

相关 ES6处理异步的方式promise

ES6处理异步的方式promise 1、promise初使用大多数情况我们发起网络请求的时候都是利用Ajax异步请求。所以这个时候Ajax在没有得到请求的结果时是

野性酷女/ 2021年09月02日 07:22/ 0 赞/ 384 阅读

相关异步处理的通用模型Promise

1. 异步处理的通用模型 ES官方参考了大量的异步场景，总结出了一套异步的通用模型，该模型可以覆盖几乎所有的异步场景，甚至是同步场景。值得注意的是，为了兼容旧系统，E

「爱情、让人受尽委屈。」/ 2021年08月28日 15:37/ 0 赞/ 421 阅读

相关异步编程——promise

异步编程——promise 定义 Promise是异步编程的一个解决方案，相比传统的解决方法——回调函数，使用Promise更为合理和强大，避免了回调函数之间的层层嵌套，...

测试账号/ 2021年01月09日 09:33/ 0 赞/ 780 阅读