<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            const p1 = new Promise(function (resolve, reject) {

              setTimeout(() => resolve("test"), 2000)

            })

            const p2 = new Promise(function (resolve, reject) {

                //经过调试发现，resolve的内容和状态能被传入的promise实例覆盖，如果是reject则不能被覆盖。

              setTimeout(() => reject(p1), 3000)

            })

            console.log(p1);

            console.log(p2);

            p2

              .then(function(result) {

                  console.log(result);

                  return "chenyujie";})

              .catch(function(error ) {

                  console.log("testsss");

                  console.log(error);

                  return p2;})

              .then(function(result) {

                  console.log(result);

                  console.log(this);},

                    function(error){

                      console.log("zhongguo");

                      console.log(error);

                    })

              // .catch(result => {

                 //  console.log(result);

              // })

        </script>

    </body>

</html>

then函数返回一个promise对象，promise对象有两个基本属性，状态和结果，其中then回调函数的返回值如果是字符串则直接为结果，状态为fulfilled，如果返回值为promise对象，则以对象状态和结果为准。（具体情况可以调试看，不一定准确，该对象有点麻烦）

var XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

const getJSON = function(url) {

  const promise = new Promise(function(resolve, reject){

    const handler = function() {

      if (this.readyState !== 4) {

        return;

      }

     // console.log(this);

      if (this.status === 200) {

        console.log(this.responseType)

        resolve(this.responseType);

      } else {

        console.log(this.status)

        console.log("-------------"+this.statusText+"----------------")

        reject(new Error(this.statusText));

      }

    };

    const client = new XMLHttpRequest();

    //client.open("GET", url, false);   //第三个参数设置为false，使得函数执行为同步操作

    client.open("GET", url);

    client.onreadystatechange = handler;

    client.responseType = "html";

    client.setRequestHeader("Accept", "text/html");

    console.log("test1")

   client.send();

    console.log("test2")

  });

  return promise;

};

//getJSON("https://www.baidu.com/wang")

getJSON("https://www.baidu.com/wang").then(function(json) {

  console.log('Contents: ' + json);

}, function(error) {

  console.log('出错了', error);

});

promise对象调试的更多相关文章

  1. Angularjs promise对象解析

    1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...

  2. ECMAScript6的Promise对象

    1. 概念 Promise对象用于异步(asynchronouss)计算,一个Promise对象代表着一个还未完成,但预期完成的操作. 2. 出现原因: 1)  如果你需要通过ajax发送多次请求,而 ...

  3. ES6 － promise对象

    Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ s ...

  4. 这次聊聊Promise对象

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 Promise是CommonJS提出的一种规范,在ES6中已经原生支持Promise对象,非ES6环境可以 ...

  5. 教你如何使用ES6的Promise对象

    教你如何使用ES6的Promise对象 Promise对象,ES6新增的一个全新特性,这个是 ES6中非常重要的一个对象 Promise的设计初衷 首先,我们先一起了解一下,为什么要设计出这么一个玩意 ...

  6. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  7. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  8. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  9. ES6的promise对象应该这样用

    ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...

随机推荐

  1. 前端-Vue基础3（父子组件交互）

    1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...

  2. Java集合Stream类filter的使用

    之前的Java集合中removeIf的使用一文写了使用removeIf来实现按条件对集合进行过滤.这篇文章使用同样是JDK1.8新加入的Stream中filter方法来实现同样的效果.并且在实际项目中 ...

  3. SQL注入：sqli-labs lesson-1 小白详解

    为什么是小白详解?因为我就是小白 SQL注入早有耳闻,今天算是真正打开这个门了,但是想要跨进去应该还是没有那么容易. 在B站上听了40分钟的网课,老实说,他讲的还不错,第一遍听不懂也正常 https: ...

  4. React 组件间通信 总结

    组件间通信 5.1.1. 方式一: 通过props传递 1)         共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 2)         通过props可以传递一般数据和 ...

  5. nmcli命令行修改网络连接名称

    目前在网上能找到的文章中,使用nmcli命令修改Linux系统中网卡连接的名称都是先创建新的连接,然后删除旧的连接的方式 此种方式其实完全不恰当,简直就是在浪费时间,nmcli命令本身就提供了直接修改 ...

  6. tomcat禁用PUT,DELETE等一些不必要的HTTP方法

    一.背景 公司进行安全整改, 技术要求:系统软件所需支撑的WEB容器环境应禁止除GET和POST外其他HTTP(S)方法. 提供凭证:建议在不影响业务的前提下,禁用PUT.DELETE.HEAD.OP ...

  7. 规模化敏捷LeSS（二）：LeSS*队实践指南

    Scrum 能够帮助一个5-9人的小*队以迭代增量的方式开发产品,在每一迭代结束时,交付潜在的可交付的产品增量.正是由于其灵活性,Scrum 方法现已成为*队软件交付方法的首选,近期发布的15届敏捷状 ...

  8. 第八篇 -- 对数据库mysql进行连接并压测

    参考链接:https://blog.csdn.net/laofashi2015/article/details/81296929 工具:mysql-8.0.12-winx64,apache-jmete ...

  9. Linux 各个命令的缩写原型

        cd:(change derictery)更换目录:    pwd:(Print Working Directory)显示当前工作目录:    mk:(make directory)创建目录: ...

  10. 简明易懂，将细节隐藏，面向新手树立web开发概念——学完Java基础语法，超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...