异步模式的编程的方法、vue中异步引入资源

矫情吗；* 2022-06-07 07:58 439阅读 0赞

**可以用作javascript异步模式的编程的方法：**

1、回调函数：这是异步编程最基本的方法

2、事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生

3、发布/订阅：上一节的"事件"，完全可以理解成"信号"

4、Promises对象：Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口

**vue中异步引入资源**

**1、异步引入vue组件**

**目的**：在页面加载的时候，不想把没有用到的代码加载，而是根据具体条件去加载相应的代码，从而提高页面渲染的速度

现在有在同级目录的a.vue文件、b.vue文件、c.vue文件，要在a.vue文件中动态引进b.vue和c.vue文件，思路如下：

1、在data中定义控制组件显隐变量： isShowBComponent，isShowCComponent，isShowPage  
      根据condition的值，设置显隐变量的值

2、在components中，使用语法() => import(路径)将组件动态引进来

3、在mounted中调用方法   this.getDataFromInterface()，即通过接口返回的值给变量this.condition赋值

4、根据this.condition的值控制 isShowBComponent，isShowCComponent，isShowPage的值

5、当isShowBComponent=true的时候，就会去加载b.vue里面的代码，而c.vue没有用到，所以就不会去加载该文件的代码，从而达到页面渲染速度提升的目的

示例如下：

<template>
      <div>
        <Bcomponent v-if="isShowBComponent" />
        <CComponent v-else-if="isShowCComponent" />
        <p v-else-if="isShowPage">show another something</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isShowBComponent: false,
          isShowCComponent: false,
          isShowPage: false,
          condition: 0
        }
      },
      components: {
        BComponent: () => import('./b.vue'),
        CComponent: () => import('./c.vue')
      },
      mounted() {
        this.getDataFromInterface()
      },
      methods: {
        gtDataFromInterface() {
          // 通过接口拿到数据后，根据字段返回值，确定要展示那个组件，比如接口返回字段condition，根据它的返回值展示
          // 在这里赋值
          this.condition = condition
          this.handleShowPage()
        },
        handleShowPage() {
          if (this.condition === 1) {
            this.isShowBComponent = true
          } else if (this.condition === 1) {
            this.isShowCComponent = false
          } else {
            this.isShowPage = true
          }
        }
      }
    }
    </script>

**2、异步引入js文件**

目的：在一个页面里面，比如支付结果页面，通常对接了很多服务，然后根据不同的服务，可能会在该页面做些不同的处理，这时候想通过异步加载文件的方式，达到是某服务的时候就加载该服务文件的代码

在同级目录下有c.vue文件，share.js   share.vue 文件

1）在c.vue文件里面做如下处理

引进share.vue文件作为components；

在data中定义变量shareData;

在mounte中调用方法getInitData()，该方法是通过接口拿到相应的数据，然后根据返回的数据serviceName的值，来判断是否加载share.js文件；

2）定义share.vue文件

3）定义share.js

代码如下：

c.vue文件

<template>
      <div>
        <Sahre  :isShow="shareData.isShow" :dataInfo="shareData.dataInfo" @click="shareData.closeEvent"/>
      </div>
    </template>
    
    <script>
    import Share from './share.vue'
    export default {
      components: {
        Share
      },
      data() {
        return {
          shareData: {
            isShow: false,         // 控制组件的显隐,
            dataInfo: {},          // 组件的数据
            closeEvent: () => {}   // 组件的关闭事件
          }
        }
      },
      mounted() {
        this.getInitData()
      },
      methods: {
        getInitData() {
          // 通过接口拿到数据，判断是某服务，serviceName
          let flag1 = serviceName === 'daiJia'
          let flag2 = serviceName === 'battery'
          if (flag1 || flag2) {
            // 这种动态引进的方式，会返回一个Promise
            import('./share.js').then(res => {
              // share.js是默认导出，所以通过res.default拿到数据
              this.shareData = res.default
              // 根据相应的服务，调用相应的方法
              if (flag1) {
                // 这里要把组件实例传过去
                this.shareData.getSetDaiJiaData(this)
              } else if (flag2) {
                this.shareData.getSetBatteryData(this)
              }
            })
          }
        }
      }
    }
    </script>
    
    <style>
    
    </style>

share.js

export default {
      isShow: false,
      dataInfo: {},
      closeEvent: () => {
        // 注意这里要用箭头函数，才能拿到this对象，并且this指向的是该文件导出的内容，即有个default属性的对象
        // 如果用一般的声明方式，则this为null
        this.default.isShow = false
      },
      getSetDaiJiaData(vm) {
        // 通过接口那数据
        // 这里不能通过this.$store去访问，需要在调用的地方传vm进来
        vm.$store.dispatch('').then(res => {
          this.isShow = res.isShow
          this.dataInfo = res.data
        }).catch(err => {
          console.error(err)
        })
      },
      getSetBatteryData(vm) {
        // 通过接口那数据
        vm.$store.dispatch('').then(res => {
          this.isShow = res.isShow
          this.dataInfo = res.dataInfo
        }).catch(err => {
          console.error(err)
        })
    },
    }

这种方法动态引进的js需要注意以下几点：

1）import(路径)，返回Promise对象，要看下引进文件是具名导出还是默认导出，如默认导出，则返回res.default；具名导出则返回res.a

2) 如果在DOM中绑定了该文件里面的方法，方法的定义要用箭头函数，同时里面访问到的是文件导出的内容，根据具体情况可能是this.default.isShow或者this.a.isShow

3) 如果在导出文件里面调用了请求方法，this对象需要在调用的地方传进来