关于ES6中的promise用法以及在ajax中的应用

今天药忘吃喽~ 2022-09-30 03:36 139阅读 0赞

最近看到了一道题，大概是让你说说promise的用法以及在ajax的使用

其实乍一看，还是蛮蒙的，说实话最近也是在慢慢的学习es6，所以很多东西还是在学习阶段，好了言归正传，这个Pormise是个什么东西呢，其实就是一个构造函数，这个构造函数本身有reject,resolve等方法，prototype原型上有then,catch等方法，用法就是var p=new Promise(function(resolve,reject)\{resolve();||reject();\});

举个栗子吧

var p=new Promise(function(resolve,reject){
    setTimeout(function(){
    console.log('执行完成');
    resolve('已经成功所以进入到了resolve中');
    },1000);
    
    });
    p.then(function(data){
    console.log(data);
    })

打印出来的是

执行完成

已经成功所以进入到了resolve中

那有人问了何时进入到reject中呢

好嘞，我们举个栗子

var p=new Promise(function(resolve,reject){
    setTimeout(function(){
    var num = Math.random()*100;
    num = parseInt(num);
    if(num>10){
    resolve('所输出的数字是大于10 的');
    }else{
    reject('所输出的数字是小于10的');
    }
    
    },1000);
    });
    p.then(function(data){
    console.log('成功啦');
    console.log(data);
    },function(reason,data){
    
    console.log(reason);
    
    
    });

看打印结果你就会看到，

当num>10的时候，就会打印出所输出的字数是大于10的

当num<10的时候，打印的reason为所输出的字数是小于10的

说到这个then了，我们还没见识下这个then的用法呢，then的用法是链式的意思

看下面这段代码

var p=new Promise(function(resolve,reject){
    setTimeout(function(){
    console.log('执行完成');
    resolve('这是第一步的结果');//1
    },1000);
    
    });
    p.then(function(data){
    //该处的data打印的就是1的内容
    console.log(data);
    return runAsync2();
    }).then(function(data){
    //此处的data就是runAsync2中的resolve中的内容
    console.log(data);
    return runAsync3();
    }).then(function(data){
    console.log(data);
    },function(reason,data){
    //此处的reason就是runAsync2中的reject中的内容
    console.log('rejected');
    console.log(reason);
    });
    var runAsync2=function(){
    var p=new Promise(function(resolve,reject){
    setTimeout(function(){
    console.log('执行完成');
    resolve('执行完成了就得打印出来啦');
    },1000);
    });
    return p;
    };
    var runAsync3=function(){
    var p=new Promise(function(resolve,reject){
    setTimeout(function(){
    console.log('哈哈，失败啦');
    reject('我让失败的');
    },1000);
    });
    return p;
    
    };

![Center][]

这里就简单的说下这个promise的用法，当然还有些all catch等的用法，现在我们进入到另外一个话题，我们先来段ajax的使用

var xhr;
    if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();}
    else{
    xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status=200){
    
    console.log(xhr.responseText);}
    
    };
    
    
    var url='/getdata.txt';
    xhr.open('GET',url,true);
    xhr.send();

我们刚刚学习了promise,因为ajax有回调函数，所以我们想借助promise来封装ajax的

直接上代码了

function ajax(method, url, data,asyn) {
    	var request;
    if(window.XMLHttpRequest){
    request=new XMLHttpRequest();}
    else{
    request=new ActiveXObject('Microsoft.XMLHTTP');
    }
    
        return new Promise(function (resolve, reject) {
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        resolve(request.responseText);
                    } else {
                        reject(request.status);
                    }
                }
            };
            request.open(method, url,asyn);
            request.send(data);
        });
    }
    
    var log = document.getElementById('test-promise-ajax-result');
    var p = ajax('GET', '/api/categories');
    p.then(function (text) { // 如果AJAX成功，获得响应内容
        log.innerText = text;
    }).catch(function (status) { // 如果AJAX失败，获得响应代码
        log.innerText = 'ERROR: ' + status;
    });

好了，就写到这里了

[Center]: /images/20220708/ede1ae4f504a466f899ad23b20127c3b.png

发表评论取消回复

表情：

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

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

相关阅读

相关 ES6 Promise用法小结

目录 1.什么是Promise？我们用Promise来解决什么问题？ 2.es6 promise用法大全 2.1、then 链式操作的用法 2. 2、reject的用

朴灿烈づ我的快乐病毒、/ 2024年04月03日 11:04/ 0 赞/ 77 阅读

相关 ES6 Promise用法总结

1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch

女爷i/ 2023年08月17日 17:07/ 0 赞/ 159 阅读

相关 ES6 Promise用法总结

目录：一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送

偏执的太偏执、/ 2023年07月04日 04:40/ 0 赞/ 37 阅读

相关 es6中的promise

[javascript中的promise，连续then，reject异常处理][javascript_promise_then_reject] [promise 中

雨点打透心脏的1/2处/ 2023年07月01日 06:24/ 0 赞/ 11 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 va

旧城等待，/ 2022年10月01日 05:41/ 0 赞/ 177 阅读

相关关于ES6中的promise用法以及在ajax中的应用

最近看到了一道题，大概是让你说说promise的用法以及在ajax的使用其实乍一看，还是蛮蒙的，说实话最近也是在慢慢的学习es6，所以很多东西还是在学习阶段，好了言归正传，

今天药忘吃喽~/ 2022年09月30日 03:36/ 0 赞/ 140 阅读

相关 ES6中的promise法则

一，promise用来解决什么问题的 > Promise > 为异步编程提供统一的解决方案，比传统的回调和事件更加合理有效。多重嵌套的回调函数，代码是横向发展，不是纵

Bertha 。/ 2022年06月04日 04:48/ 0 赞/ 252 阅读

相关 ES6 Promise 用法讲解

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个 ![复制代码

一时失言乱红尘/ 2021年11月23日 06:08/ 0 赞/ 312 阅读

相关 Es6-promise用法小结

.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等

╰半橙微兮°/ 2021年11月23日 03:38/ 0 赞/ 389 阅读

相关 es6中Promise的理解以及使用

转载：[https://www.zcfy.cc/article/javascript-promises-for-dummies-scotch-1961.html][https_

约定不等于承诺〃/ 2021年09月17日 22:42/ 0 赞/ 430 阅读