6月29日得物一面

一、Object.prototype.toString() 的调用

对于 Object.prototype.toString() 方法，会返回一个形如 "[object XXX]" 的字符串。

如果对象的 toString() 方法未被重写，就会返回如上面形式的字符串。

({}).toString();     // => "[object Object]"
Math.toString();     // => "[object Math]"

 

但是，大多数对象，toString() 方法都是重写了的，这时，需要用 call() 或 Reflect.apply() 等方法来调用。

var x = {
  toString() {
    return "X";
  },
};

x.toString();                                     // => "X"

Object.prototype.toString.call(x);                // => "[object Object]"

Reflect.apply(Object.prototype.toString, x, []);  // => "[object Object]"

二、Object.prototype.toString() 的原理

对于 Object.prototype.toString.call(arg)，若参数为 null 或 undefined，直接返回结果。

Object.prototype.toString.call(null);       // => "[object Null]"
Object.prototype.toString.call(undefined);  // => "[object Undefined]"

 

若参数不为 null 或 undefined，则将参数转为对象，再作判断。对于原始类型，转为对象的方法即装箱，此处不赘述。

转为对象后，取得该对象的 [Symbol.toStringTag] 属性值（可能会遍历原型链）作为 tag，如无该属性，或该属性值不为字符串类型，则依下表取得 tag, 然后返回 "[object " + tag + "]" 形式的字符串。

// Boolean 类型，tag 为 "Boolean"
Object.prototype.toString.call(true);            // => "[object Boolean]"

// Number 类型，tag 为 "Number"
Object.prototype.toString.call(1);               // => "[object Boolean]"

// String 类型，tag 为 "String"
Object.prototype.toString.call("");              // => "[object String]"

// Array 类型，tag 为 "String"
Object.prototype.toString.call([]);              // => "[object Array]"

// Arguments 类型，tag 为 "Arguments"
Object.prototype.toString.call((function() {
  return arguments;
})());                                           // => "[object Arguments]"

// Function 类型， tag 为 "Function"
Object.prototype.toString.call(function(){});    // => "[object Function]"

// Error 类型（包含子类型），tag 为 "Error"
Object.prototype.toString.call(new Error());     // => "[object Error]"

// RegExp 类型，tag 为 "RegExp"
Object.prototype.toString.call(/\d+/);           // => "[object RegExp]"

// Date 类型，tag 为 "Date"
Object.prototype.toString.call(new Date());      // => "[object Date]"

// 其他类型，tag 为 "Object"
Object.prototype.toString.call(new class {});    // => "[object Object]"

 

下面为部署了 Symbol.toStringTag 的例子。可以看出，属性值期望是一个字符串，否则会被忽略。

var o1 = { [Symbol.toStringTag]: "A" };
var o2 = { [Symbol.toStringTag]: null };

Object.prototype.toString.call(o1);      // => "[object A]"
Object.prototype.toString.call(o2);      // => "[object Object]"

 

Symbol.toStringTag 也可以部署在原型链上：

class A {}
A.prototype[Symbol.toStringTag] = "A";
Object.prototype.toString.call(new A());   // => "[object A]"

 

新标准引入了 [Symbol.toStringTag] 属性，是为了把此方法接口化，用于规范新引入的对象对此方法的调用。但对于“老旧”的对象，就只能直接输出值，以保证兼容性。

 

 

三、部署了此属性的内置对象

下面，我列出所有部署了此属性的内置对象。

1. 三个容器对象。这类对象用作命名空间，用于存储同一类方法。

JSON[Symbol.toStringTag];         // => "JSON"

Math[Symbol.toStringTag];         // => "Math"

Atomics[Symbol.toStringTag];      // => "Atomic"

 

这三个对象的 toString() 都没有重写，直接调用 toString() 方法也可以得到相同的结果。

JSON.toString();         // => "[object JSON]"

Math.toString();         // => "[object Math]"

Atomics.toString();      // => "[object Atomics]"

 

2. 两个新引入的类型 BigInt 和 Symbol。

BigInt.prototype[Symbol.toStringTag];      // => "BigInt"

Symbol.prototype[Symbol.toStringTag];      // => "Symbol"

组件的封装

vue组件的定义

● 组件(Component)是Vue.js最强大的功能之一

● 组件可以扩展HTML元素，封装可重用代码

● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能

● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素

● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子
 

vue组件的功能

1）能够把页面抽象成多个相对独立的模块

2）实现代码重用，提高开发效率和代码质量，使得代码易于维护

Vue组件封装过程

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

组件使用流程详细介绍

1、组件创建---有3中方法，extend()      <template id=''>      <script type='text/x-template'  id=''>

A、调用Vue.extend()，创建名为myCom的组件，template定义模板的标签，模板的内容需写在该标签下
 

    var myCom = Vue.extend({
        template: '<div>这是我的组件</div>'
    })

B、<template id='myCom'>标签创建，需要加上id属性

    <template id="myCom">
        <div>这是template标签构建的组件</div>
    </template>

C、<script type='text/x-template' id='myCom'>,需加id属性，同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码

    <script type="text/x-template" id="myCom1">
        <div>这是script标签构建的组件</div>
    </script>

 

2、注册组件----有2中方法，全局注册，局部注册

A1、全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。

我们先用全局注册，注册上面例子中创建的myCom组件

 

  Vue.component('my-com',myCom)

 

A2、全局注册语法糖：不需要创建直接注册的写法

    Vue.component('my-com',{
        'template':'<div>这是我的组件</div>'
    })

 

'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。

A3、如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

    Vue.component('my-com',{
        template: '#myCom'
    })

 

B1、局部注册：只能在注册该组件的实例中使用，一处注册，一处使用

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': myCom
        }
    })

 

B2、局部注册语法糖：

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '<div>这是我的组件</div>'
            }
        }
    })

 

B3、<template>及<script>创建的组件，局部注册

    var app = new Vue({
        el: '#app',
        components: {
            'my-com': {
               template: '#myCom'
            }
        }
    })

 

3、调用组件

只需要在调用组件的地方，写上组件名字的标签即可

    <div>
        /*调用组件*/
        <my-com></my-com>
    </div>

 

4、栗子

A、全局注册：新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
        </div>
        <div id="app2">
            <my-com></my-com>
        </div>
     
        <script>
            /*创建组件*/
            var myCom = Vue.extend({
                template: '<div>这是我的组件</div>'
            });
            /*全局注册组件*/
            Vue.component('my-com',myCom);
     
            /*定义vue实例app1*/
            var app1 = new Vue({
                el: '#app1'
            });
     
            /*定义vue实例app2*/
            var app2 = new Vue({
                el: '#app2'
            });
        </script>
    </body>
    </html>

 

显示效果：

可以看到，全局注册的组件在实例app1和实例app2中都可以被调用。

B、局部注册：将创建的组件注册到实例app1下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
        </div>
        <div id="app2">
            <my-com></my-com>
        </div>
     
        <script>
            var myCom = Vue.extend({
                template: '<div>这是我的组件</div>'
            });
     
            // Vue.component('my-com',myCom);
            /*局部注册组件*/
            var app1 = new Vue({
                el: '#app1',
                components:{
                    'my-com':myCom
                }
            });
     
            var app2 = new Vue({
                el: '#app2'
            });
        </script>
    </body>
    </html>

 

可以看到只渲染了app1实例下的组件，app2实例虽然调用了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。

C、template 和script标签创建组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <my-com></my-com>
            <my-com1></my-com1>
        </div>
     
        <template id="myCom">
            <div>这是template标签构建的组件</div>
        </template>
     
        <script type="text/x-template" id="myCom1">
            <div>这是script标签构建的组件</div>
        </script>
     
        <script>
            Vue.component('my-com1',{ //全局注册
                template: '#myCom1'
            });
     
            var app1 = new Vue({
                el: '#app1',
                components:{
                    'my-com':{
                        template: '#myCom'  //局部注册
                    }
                }
            });
        </script>
    </body>
    </html>

 

显示效果：

5、异步组件

vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。

当项目比较大型，结构比较复杂时，我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境，使用单文件组件，开发更简单，易上手，尤其是在对组件的处理上。对于原生vue.js，我们就得将组件构建在同一个html的script标签下或者html的外部js中，所有组件集中在一块，不容易管理，这也是原生vue,js的一点不便之处

vue.js可以将异步组件定义为一个工厂函数。

使用$.get获取本地文件会跨域，所以要将项目部署到服务器中
 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
        <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
    </head>
    <body>
        <div id="app1">
            <head-com></head-com>
        </div>
        <script>
            Vue.component('head-com', function (resolve, reject) {
                $.get("a.html").then(function (res) {
                    resolve({
                        template: res
                    })
                });
            });
     
            var app1 = new Vue({
                el: '#app1'
            });
     
        </script>
    </body>
    </html>

 

显示效果如下：

6、Vue中的props数据流

通过在注册组件中申明需要使用的props，然后通过props中与模板中传入的对应的属性名，去取用这些值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue组件</title>
        <script src="vue.js"></script>
        <script type="text/javascript" src='jquery-3.1.1.min.js'></script>
    </head>
    <body>
        <div id='app'>
           <my-component name="jiangjiang" come-from="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>
        <script>
            Vue.component('my-component', {
              props: ['name', 'comeFrom'],    //在注册组件的时候通过props选项声明了要取用的多个prop
              // 在注册组件的模板中使用到props选项中声明的值
              template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>',
              created: function () {
                console.log('在created钩子函数中被调用')
                console.log('我叫：', this.name)
                console.log('我来自：', this.comeFrom)
              }
            })
     
     
            new Vue({
              el: '#app'
            })
     
     
        </script>
    </body>
    </html>

 

注意：

A、props取值的方式

在注册组件的模板内部template，直接通过prop的名称取值就Ok

    template: '<p>我叫：{{name}}, 我来自：{{comeFrom}}</p>'

 

不在注册组件的模板内部template，用this.prop的方式

    console.log('我来自：', this.comeFrom)

 

B、在template选项属性中，可以写驼峰命名法，也可以写短横线命名法

      在HTML(模板)中，只能写短横线命名法

原因：vue组件的模板可以放在两个地方

a、Vue组件的template选项属性中，作为模板字符串

b、放在.html中[  用script  template标签创建的组件 ]，作为HTML

问题在于HTML不区分大小写，所以在vue注册组件中通用的驼峰命名法，不适用于HTML中的Vue模板，在HTML中写入props属性，必须写短横线命名法（把原来props属性中的每个prop大写换成小写，并且在前面加“-”）

将6中的
 

        <div id='app'>
           <my-component name="jiangjiang" come-from="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>

改成

        <div id='app'>
           <my-component name="jiangjiang" comeFrom="guilin"></my-component>
           <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->
        </div>

 

显示效果，第二个没有显示

异步组件的实现原理；异步组件的3种实现方式---工厂函数、Promise、高级函数

异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染

高级异步组件可以通过简单的配置实现loading   resolve   reject   timeout  4种状态
 

继承

1、原型链继承
核心： 将父类的实例作为子类的原型

  function Parent1() {
    this.name = 'parent1';
    this.play = [1, 2, 3]
  }
  function Child1() {
    this.type = 'child2';
  }
  Child1.prototype = new Parent1();
  console.log(new Child1());
 
  // 潜在的问题
  let s1 = new Child1();
  let s2 = new Child1();
  s1.play.push(4);
  console.log(s1.play, s2.play); // [1,2,3,4]   [1,2,3,4]
  // 两个实例使用的是同一个原型对象。它们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行了变化，这就是使用原型链继承方式的一个缺点。

特点：
1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例
2.父类新增原型方法/原型属性，子类都能访问到
3.简单，易于实现

缺点：
1.要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
2.无法实现多继承
3.来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）
4.创建子类实例时，无法向父类构造函数传参

2、构造函数继承（借助 call）
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

  function Parent1(){
    this.name = 'parent1';
  }
 
  Parent1.prototype.getName = function () {
    return this.name;
  }
 
  function Child1(){
    Parent1.call(this);
    this.type = 'child1'
  }
 
  let child = new Child1();
  console.log(child);  // 没问题
  console.log(child.getName());  // 会报错

特点：
1.解决了1中，子类实例共享父类引用属性的问题
2.创建子类实例时，可以向父类传递参数
3.可以实现多继承（call多个父类对象）

缺点：
1.实例并不是父类的实例，只是子类的实例
2.只能继承父类的实例属性和方法，不能继承原型属性/方法
3.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、组合继承（前两种组合）
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

  function Parent3 () {
    this.name = 'parent3';
    this.play = [1, 2, 3];
  }
 
  Parent3.prototype.getName = function () {
    return this.name;
  }
  function Child3() {
    // 第二次调用 Parent3()
    Parent3.call(this);
    this.type = 'child3';
  }
 
  // 第一次调用 Parent3()
  Child3.prototype = new Parent3();
  // 手动挂上构造器，指向自己的构造函数
  Child3.prototype.constructor = Child3;
  var s3 = new Child3();
  var s4 = new Child3();
  s3.play.push(4);
  console.log(s3.play, s4.play);  // 不互相影响
  console.log(s3.getName()); // 正常输出'parent3'
  console.log(s4.getName()); // 正常输出'parent3'

特点：
1.弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
2.既是子类的实例，也是父类的实例
3.不存在引用属性共享问题
4.可传参
5.函数可复用

缺点：
调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4、原型式继承
ES5 里面的 Object.create 方法，这个方法接收两个参数：一是用作新对象原型的对象、二是为新对象定义额外属性的对象（可选参数）

  let parent4 = {
    name: "parent4",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      return this.name;
    }
  };
 
  let person4 = Object.create(parent4);
  person4.name = "tom";
  person4.friends.push("jerry");
  let person5 = Object.create(parent4);
  person5.friends.push("lucy");
 
  console.log(person4.name); // tom
  console.log(person4.name === person4.getName()); // true
  console.log(person5.name); // parent4
  console.log(person4.friends); // ['p1', 'p2', 'p3', 'jerry', 'lucy']
  console.log(person5.friends); // ['p1', 'p2', 'p3', 'jerry', 'lucy']

通过 Object.create 这个方法可以实现普通对象的继承，不仅仅能继承属性，同样也可以继承 getName 的方法。
第一个结果“tom”，比较容易理解，person4 继承了 parent4 的 name 属性，但是在这个基础上又进行了自定义。
第二个是继承过来的 getName 方法检查自己的 name 是否和属性里面的值一样，答案是 true。
第三个结果“parent4”也比较容易理解，person5 继承了 parent4 的 name 属性，没有进行覆盖，因此输出父对象的属性。
最后两个输出结果是一样，其实 Object.create 方法是可以为一些对象实现浅拷贝的。

5、寄生式继承
使用原型式继承可以获得一份目标对象的浅拷贝，然后利用这个浅拷贝的能力再进行增强，添加一些方法，这样的继承方式就叫作寄生式继承。

虽然其优缺点和原型式继承一样，但是对于普通对象的继承方式来说，寄生式继承相比于原型式继承，还是在父类基础上添加了更多的方法。

   let parent5 = {
    name: "parent5",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      return this.name;
    }
  };
 
  function clone(original) {
    let clone = Object.create(original);
    clone.getFriends = function() {
      return this.friends
    };
    return clone;
  }
 
  let person5 = clone(parent5);
  console.log(person5.getName()); // parent5
  console.log(person5.getFriends()); //  ['p1', 'p2', 'p3']

通过上面这段代码，我们可以看到 person5 是通过寄生式继承生成的实例，它不仅仅有 getName 的方法，而且可以看到它最后也拥有了 getFriends 的方法。

6、寄生组合式继承
结合第四种中提及的继承方式，解决普通对象的继承问题的 Object.create 方法，我们在前面这几种继承方式的优缺点基础上进行改造，得出了寄生组合式的继承方式，这也是所有继承方式里面相对最优的继承方式。

  function clone (parent, child) {
    // 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;
  }
 
  function Parent6() {
    this.name = 'parent6';
    this.play = [1, 2, 3];
  }
   Parent6.prototype.getName = function () {
    return this.name;
  }
  function Child6() {
    Parent6.call(this);
    this.friends = 'child5';
  }
 
  clone(Parent6, Child6);
 
  Child6.prototype.getFriends = function () {
    return this.friends;
  }
 
  let person6 = new Child6();
  console.log(person6);  // child6 {name: "parent6",play: [1, 2, 3], friends: "child5"}
  console.log(person6.getName()); // parent6
  console.log(person6.getFriends()); // child5

通过这段代码可以看出来，这种寄生组合式继承方式，基本可以解决前几种继承方式的缺点，较好地实现了继承想要的结果，同时也减少了构造次数，减少了性能的开销.

总体看下来，这六种继承方式中，寄生组合式继承是这六种里面最优的继承方式

ES6 提供了继承的关键字 extends

class Person {
  constructor(name) {
    this.name = name
  }
  // 原型方法
  // 即 Person.prototype.getName = function() { }
  // 下面可以简写为 getName() {...}
  getName = function () {
    console.log('Person:', this.name)
  }
}
 
class Gamer extends Person {
  constructor(name, age) {

 

TS范式有哪些

一、泛型是什么？有什么作用

当我们定义一个变量不确定类型的时候有两种解决方式：

    使用any
    使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势
    使用泛型
    泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

二、泛型用法
2.1 在函数中使用泛型

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true

使用方式类似于函数传参，传什么数据类型，T就表示什么数据类型， 使用表示，T也可以换成任意字符串。
2.2 在接口中使用泛型

// 注意，这里写法是定义的方法哦
interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//编译器会自动识别传入的参数，将传入的参数的类型认为是泛型指定的类型

 

2.3 在类中使用泛型

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

三、泛型约束
3.1使用接口约束泛型

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg:T):T {
  return arg;
}

student({name:'lili'});//类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性
student({ name: "lili" , age:'11'});//不能将类型“string”分配给类型“number”
student({ name: "lili" , age:11});

3.2 数组泛型

let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]

 

四、泛型工具类型
4.1 Partial

partial<T>的作用就是将某个类型中的属性全部变为可选项?
示例：

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
  return arg;
}

4.2 Record

Record<K extends keyof any, T>的作用是将K中所有的属性转换为T类型；示例：

interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

 

4.3 Pick

Pick<T, K extends keyof T>的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型，示例：

interface Todo {
  title:string,
  desc:string,
  time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
  title:'吃饭',
  time:'明天'
}

 

4.4 Exclude

Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉，示例：

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
const t:T0 ='b';

4.5 ReturnType

returnType<T>的作用是用于获取函数T的返回类型，示例：

type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error

 

并行请求两个接口后再请求第三个

面试官问我，如何并行请求两个接口，拿到数据后再请求第三个接口？

完蛋，一时大脑一片空白，心想平时还真没遇到过类似场景。

最怕场面突然安静，寂静的几十秒中我惭愧的真想找个地缝钻进去。。。

一：Promise解决

对的，你没想错就是Promise的all方法。

我平时看的ES6关键时刻都到狗肚子去了，明明知道这个语法却联系不到实用场景上。

    // 第一个请求
    let p1 = new Promise((resolve) => {
        axios({
            url: 'http://39.104.22.73:8081/ScoreRead/foreend',  // 列表接口
            method: 'post',
        }).then((resp) => {
            resolve(resp.data.data.num);
        }).catch();
    });

    // 第二个请求
    let p2 = new Promise((resolve) => {
        axios({
            url: 'http://39.104.22.73:8888/TagRead/foreend', // 标签列表接口
            method: 'post',
        }).then((resp) => {    
            resolve(resp.data.data.length);
        }).catch();
    });

    // 静态方法all的then方法就等同于，多个promise实例方法的多个then汇集
    Promise.all([p1,p2]).then((value)=>{
        console.log(value);
        $("#promise3").html(`${value[0]} + ${value[1]}`);
        // 这里可以再执行第三个请求
    });

 

二：Axios的写法

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

 

__EOF__

本文作者：Mr丶Kr's blog
本文链接：https://www.cnblogs.com/mrkr/p/17514471.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！