Promise学习（一）

2020-09-24 14:32:45 阅读：200 来源： 互联网

标签：function successMessage resolve log 学习调用 Promise

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”（executor function）的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject ——作为其参数。当异步任务顺利完成且返回结果值时，会调用 resolve 函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用reject 函数。

<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    // HelloWorld,
  },
  mounted() {
    let myFirstPromise = new Promise((resolve) => {
      setTimeout(function () {
        resolve("成功!"); //代码正常执行！
      }, 250);
    });
    myFirstPromise.then(function (successMessage) {
      //successMessage的值是上面调用resolve(...)方法传入的值.
      //successMessage参数不一定非要是字符串类型，这里只是举个例子
      console.log("Yay! " + successMessage);
    });
    // console.log(myFirstPromise);
  },
  methods: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　上面是代码执行的方法，打印结果如下：

Promise的高级示列。

<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div id="log" style="width: 500px; height: 100px"></div>
    <button @click="testPromise()">按钮</button>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    // HelloWorld,
  },
  data() {
    return {
      promiseCount: 0,
    };
  },
  mounted() {
    // let myFirstPromise = new Promise((resolve) => {
    //   setTimeout(function () {
    //     resolve("成功!"); //代码正常执行！
    //   }, 250);
    // });
    // myFirstPromise.then(function (successMessage) {
    //   //successMessage的值是上面调用resolve(...)方法传入的值.
    //   //successMessage参数不一定非要是字符串类型，这里只是举个例子
    //   console.log("Yay! " + successMessage);
    // });
  },
  methods: {
    testPromise() {
      let thisPromiseCount = ++this.promiseCount;

      let log = document.getElementById("log");
      log.insertAdjacentHTML(
        "beforeend",
        thisPromiseCount + ") 开始 (<small>同步代码开始</small>)<br/>"
      );

      // 新构建一个 Promise 实例：使用Promise实现每过一段时间给计数器加一的过程，每段时间间隔为1~3秒不等
      let p1 = new Promise(
        // resolver 函数在 Promise 成功或失败时都可能被调用
        (resolve, reject) => {
          console.log(reject);
          log.insertAdjacentHTML(
            "beforeend",
            thisPromiseCount +
              ") Promise 开始 (<small>异步代码开始</small>)<br/>"
          );
          // 创建一个异步调用
          window.setTimeout(function () {
            // 填充 Promise
            resolve(thisPromiseCount);
          }, Math.random() * 2000 + 1000);
        }
      );

      // Promise 不论成功或失败都会调用 then
      // catch() 只有当 promise 失败时才会调用
      p1.then(
        // 记录填充值
        function (val) {
          log.insertAdjacentHTML(
            "beforeend",
            val + ") Promise 已填充完毕 (<small>异步代码结束</small>)<br/>"
          );
        }
      ).catch(
        // 记录失败原因
        (reason) => {
          console.log("处理失败的 promise (" + reason + ")");
        }
      );

      log.insertAdjacentHTML(
        "beforeend",
        thisPromiseCount + ") Promise made (<small>同步代码结束</small>)<br/>"
      );
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我这些都是在vue中所展示的示列，大家也可以复制看看效果。其中.then的方法是不管promise是执行错误还是正确都会调用，而 .catch 只有在失败的时候才会调用。

这是只点击了一次的效果。

连续点击两次后

因为在setTimeout中的时间设置的随机数，所以后面异步代码结束是随机的。但是前面还是按照js的标准从上到下执行。

标签：function,successMessage,resolve,log,学习,调用,Promise
来源： https://www.cnblogs.com/baisong11/p/13723886.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Promise学习（一）