zoukankan      html  css  js  c++  java
  • 21-vue之Promise基本概念的介绍

    1、Promise基本介绍

    // 1. Promise 是一个 构造函数,既然是构造函数, 那么,我们就可以  new Promise() 得到一个 Promise 的实例;
    // 2. 在 Promise 上,有两个函数,分别叫做 resolve(成功之后的回调函数) 和 reject(失败之后的回调函数)
    // 3. 在 Promise 构造函数的 Prototype 属性上,有一个 .then() 方法,也就说,只要是 Promise 构造函数创建的实例,都可以访问到 .then() 方法
    // 4. Promise 表示一个 异步操作;每当我们 new 一个 Promise 的实例,这个实例,就表示一个具体的异步操作;
    // 5. 既然 Promise 创建的实例,是一个异步操作,那么,这个 异步操作的结果,只能有两种状态:
    //  5.1 状态1: 异步执行成功了,需要在内部调用 成功的回调函数 resolve 把结果返回给调用者;
    //  5.2 状态2: 异步执行失败了,需要在内部调用 失败的回调函数 reject 把结果返回给调用者;
    //  5.3 由于 Promise 的实例,是一个异步操作,所以,内部拿到 操作的结果后,无法使用 return 把操作的结果返回给调用者; 这时候,只能使用回调函数的形式,来把 成功 或 失败的结果,返回给调用者;
    // 6. 我们可以在 new 出来的 Promise 实例上,调用 .then() 方法,【预先】 为 这个 Promise 异步操作,指定 成功(resolve) 和 失败(reject) 回调函数;
    
    
    // 注意:这里 new 出来的 promise, 只是代表 【形式上】的一个异步操作;
    // 什么是形式上的异步操作:就是说,我们只知道它是一个异步操作,但是做什么具体的异步事情,目前还不清楚
    // var promise = new Promise()
    
    
    // 这是一个具体的异步操作,其中,使用 function 指定一个具体的异步操作
    /* var promise = new Promise(function(){
      // 这个 function 内部写的就是具体的异步操作!!!
    }) */
    
    const fs = require('fs')
    
    // 每当 new 一个 Promise 实例的时候,就会立即 执行这个 异步操作中的代码
    // 也就是说,new 的时候,除了能够得到 一个 promise 实例之外,还会立即调用 我们为 Promise 构造函数传递的那个 function,执行这个 function 中的 异步操作代码;
    /* var promise = new Promise(function () {
      fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => {
        if (err) throw err
        console.log(dataStr)
      })
    }) */
    
    
    // 初衷: 给路径,返回读取到的内容
    function getFileByPath(fpath) {
      return new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    
          if (err) return reject(err)
          resolve(dataStr)
    
        })
      })
    }
    
    /* getFileByPath('./files/2.txt')
      .then(function (data) {
        console.log(data + '-------')
      }, function (err) {
        console.log(err.message)
      }) */
    

      2、promise回调

    const fs = require('fs')
    
    function getFileByPath(fpath) {
      return new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    
          if (err) return reject(err)
          resolve(dataStr)
    
        })
      })
    }
    
    // 先读取文件1,在读取2,最后读取3
    // 注意: 通过 .then 指定 回调函数的时候,成功的 回调函数,必须传,但是,失败的回调,可以省略不传
    // 这是一个 错误的示范,千万不要这么用; 硬是把 法拉利,开成了 拖拉机;
    /* getFileByPath('./files/1.txt')
      .then(function (data) {
        console.log(data)
    
        getFileByPath('./files/2.txt')
          .then(function (data) {
            console.log(data)
    
            getFileByPath('./files/3.txt')
              .then(function (data) {
                console.log(data)
              })
          })
      }) */
    
    // 读取文件1
    // 在上一个 .then 中,返回一个新的 promise 实例,可以继续用下一个 .then 来处理
    
    
    // 如果 ,前面的 Promise 执行失败,我们不想让后续的Promise 操作被终止,可以为 每个 promise 指定 失败的回调
    /* getFileByPath('./files/11.txt')
      .then(function (data) {
        console.log(data)
    
        // 读取文件2
        return getFileByPath('./files/2.txt')
      }, function (err) {
        console.log('这是失败的结果:' + err.message)
        // return 一个 新的 Promise
        return getFileByPath('./files/2.txt')
      })
      .then(function (data) {
        console.log(data)
    
        return getFileByPath('./files/3.txt')
      })
      .then(function (data) {
        console.log(data)
      }).then(function (data) {
        console.log(data)
      }) */
    
    // console.log('OKOKOK')
    
    
    
    // 当 我们有这样的需求: 哪怕前面的 Promise 执行失败了,但是,不要影响后续 promise 的正常执行,此时,我们可以单独为 每个 promise,通过 .then 指定一下失败的回调;
    
    // 有时候,我们有这样的需求,个上面的需求刚好相反:如果 后续的Promise 执行,依赖于 前面 Promise 执行的结果,如果前面的失败了,则后面的就没有继续执行下去的意义了,
    此时,我们想要实现,一旦有报错,则立即终止所有 Promise的执行; getFileByPath('./files/1.txt') .then(function (data) { console.log(data) // 读取文件2 return getFileByPath('./files/22.txt') }) .then(function (data) { console.log(data) return getFileByPath('./files/3.txt') }) .then(function (data) { console.log(data) }) .catch(function (err) { // catch 的作用: 如果前面有任何的 Promise 执行失败,则立即终止所有 promise 的执行,并 马上进入 catch 去处理 Promise中 抛出的异常; console.log('这是自己的处理方式:' + err.message) })

      3、jquery中使用promise

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
    
      <input type="button" value="获取数据" id="btn">
    
      <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    
      <script>
        $(function () {
          $('#btn').on('click', function () {
            $.ajax({
              url: './data.json',
              type: 'get',
              dataType: 'json'
            })
              .then(function (data) {
                console.log(data)
              })
          })
        });
      </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    centos7 Nginx1.14+php7+mysql5.7 以及 centos7 Apache2.4+PHP7+mysql 安装 Linux 配置 composer 以及Python2.7升级到3.7
    微信遇到的几个小问题
    前段mui框架初识
    关于百度编辑器设置默认行间距段间距
    call与apply 以及闭包
    随笔日记2018 4.10 关于多选框
    关于JVM中的两个Survivor区
    (转)Struts2的工作原理
    (转)struts2的执行流程、工作原理
    (转)最大乘积分析(切绳子)
  • 原文地址:https://www.cnblogs.com/HHR-SUN/p/14137206.html
Copyright © 2011-2022 走看看