Vue学习（三十四）——Promise

文章目录一、前后端交互模式1、接口调用方式2、异步调用二、Promise1、什么是Promise2、Promise的基本用法3、基于Promise发送Ajax请求三、Promise常用的API1、实例方法2、对象方法一、前后端交互模式1、接口调用方式原生ajax基于jQuery的ajaxJQuery为dom操作，Vue很少涉及dom操作，Vue中用不到fetch可以看做是ajax的升级版，标准化组

云中、漫步

2536人浏览 · 2020-10-14 00:55:26

云中、漫步 · 2020-10-14 00:55:26 发布

文章目录

一、前后端交互模式

1、接口调用方式

原生ajax
基于jQuery的ajax

JQuery为dom操作，Vue很少涉及dom操作，Vue中用不到

fetch

可以看做是ajax的升级版，标准化组织制定的API

axios

第三方类库，更加强大

2、异步调用

JavaScript的执行环境是「单线程」；
所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程；
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现；
异步模式可以一起执行多个任务。
JS中常见的异步调用

定时任务
ajax
事件函数

多次异步调用的依赖分析

多次异步调用的结果顺序不确定
异步调用的结果如果存在依赖需要嵌套

在这里插入图片描述
异步不一定是顺序出现的，若想顺序出现可通过回调函数的嵌套：

上面方法不推荐使用。推荐使用promise。

二、Promise

1、什么是Promise

Promise是一种异步编程的解决方案，其实是一个构造函数；
用于解决异步回调地狱的问题，简洁的API使得异步操作更加容易；
可以理解为是一个容器（对象），里面是异步事件。

2、Promise的基本用法

实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务；
我们使用new来构建一个Promise， Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数；
Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数（两个函数）；

语法如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var p = new Promise(function (resolve,reject) {
        // 这里用于实现异步任务
        setTimeout(function () {
          var flag = true;
          if (flag){
              // 正常情况
              resolve("正确的结果")
          }else {
              reject("错误的结果")
          }
        },100)
    });
    p.then(function (data) {
        console.log(data);
    },function (info) {
        console.log(info);
    })
</script>

</body>
</html>

效果如下：
在这里插入图片描述

3、基于Promise发送Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>
</body>
</html>

三、Promise常用的API

1、实例方法

p.then() ：得到异步任务的正确结果
p.catch()：获取异常信息
p.finally() ：成功与否都会执行

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        console.log(data)
      },function(data){
        console.log(data)
      })
      .finally(function(){
        console.log('finished')
      });
  </script>
</body>
</html>

2、对象方法

promise.all()并发处理多个异步任务，所有任务都执行完才能得到结果
promise.race()并发处理多个异步任务，只要有一个任务完成就能的到结果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
        return new Promise(function(resolve, reject){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState != 4) return;
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 处理正常的情况
                    resolve(xhr.responseText);
                }else{
                    // 处理异常情况
                    reject('服务器错误');
                }
            };
            xhr.open('get', url);
            xhr.send(null);
        });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
    Promise.all([p1,p2,p3]).then(function(result){
        // all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
      console.log(result)  //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
    })
    Promise.race([p1,p2,p3]).then(function(result){
        // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
        console.log(result)  // "HELLO TOM"
    })
</script>
</body>
</html>