• ES6 Promise对象使用 (一)


    总结下promise对象的基本使用及注意点

    首先看一个Promise的最简单实例

    写法一:
    function timeout(ms) {
    //返回一个 promise 对象
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, 'done'); }); } 
      // setTimeout 可以接受第二个以外的值,这些值作为参数传给它包含的回掉函数,本案例中是 resolve。所以也可以写成如下:
      //
    setTimeout((xxx) => { resolve(xxx) }, ms, 'done'); 又或者
      // setTimeout(() => { resolve('done') },ms); 更多 setTimeout 传参问题可自行搜索。
    //返回 promise 才可调用它的 then 方法
    timeout(
    100).then((value) => { console.log(value); });

    //换成下面写法就没法传递参数 "ms"了。

     写法二:

    function timeout(resolve, reject) {
      setTimeout(resolve, 1000, 'done');

    };

    let p1 = new Promise(timeout);

    p1.then((value) => {

      console.log(value);
    });

    由上可以总结Promise使用的几点

    1. 要创建一个实例

      var p1 = new Promise(functionX)

    2. new Promise(functionX) 里的functionX只接受两个参数 resolve, reject 写了其他的会报错。

      Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

      resolve函数在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。

      reject函数在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

      (摘自阮一峰ES6教程)

    3. 之后创建的实例 p1 就可以使用 then方法:p1.then(callback1(参数),callback2(参数))

      then() 语义很清楚,然后,是在事情处理完后就调用里面的callback函数。callback1,callback2分别对应参数 resolve 和 reject 。

      then 里面 callback1 的参数,就是 上述 functionX 里 resolve 的参数。在上面实例中 resolve 的参数是 'done',则 then 里的 (value) value值就是 'done' 。

    4. 实例红色标注处表示,想要在 functionX 里传入其他参数供函数内部逻辑使用,就需用第一种写法:

      定义一个函数,里面 return 一个Promise。函数执行后使用then方法 fn().then()

    5. 其他概念性问题提一下

     a. Promise 是异步编程的一种解决方案,比 setTimeout , setInterval 优先执行。(更多js事件机制请查看:https://segmentfault.com/a/1190000011198232)

     b.不是异步就像setTimeout , setInterval 等有计时功能。

       c. js 是单线程,所谓的异步只是把你规定为需要异步处理的事件搁在了之后执行。就好比 js 是个人的话他没法影分身。(更多js异步请自行查阅资料)

    参考链接: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

    参考链接:http://es6.ruanyifeng.com/#docs/promise

  • 相关阅读:
    前端开发神器
    React表单明文密文切换,携带禁止浏览器自动回填,简单验证提示功能
    webapp 虚拟键盘隐藏留下空白解决办法
    jQuery常用表单事件执行顺序
    localStorage+cookie实现存取表单历史记录
    js.cookie.js使用方法
    H5超细边框
    JS删除数组中某个元素
    JS获取地址栏参数(支持中文)
    React书写规范
  • 原文地址:https://www.cnblogs.com/forlong/p/9143267.html
Copyright © 2020-2023  润新知