精华内容
下载资源
问答
  • 使用 vue-asyn-manager 管理 Vue 应用中的异步调用不知道大家对 React Suspense 是否有过关注,也许 Suspense 让人比较激动的是在服务端的流式渲染,然而从目前来看,React Suspense 的功能其实就是个 Loadable。...

    使用 vue-asyn-manager 管理 Vue 应用中的异步调用

    ba77e797b3b1205f9857e037e263dfc4.png

    不知道大家对 React Suspense 是否有过关注,也许 Suspense 让人比较激动的是在服务端的流式渲染,然而从目前来看,React Suspense 的功能其实就是个 Loadable。当然啦这是我个人的看法,不过这不是今天的重点,今天的重点是介绍如何在 Vue 应用中更好的管理异步调用,那为什么会扯到 React Suspense 呢?因为 vue-async-manager 的灵感来自于 React Suspense,因此让我们开始吧。

    vue-async-manager 是一个开源项目:

    • https://shuidi-fed.github.io/vue-async-manager/

    指南

    在 Vue 应用中更轻松的管理异步调用

    异步调用指的是什么?

    这里所说的异步调用,主要指的是两件事儿:

    • 异步组件(Async Component)的加载
    • 发送异步请求从 API 中获取数据

    等待异步组件的加载

    实际上 Vue 的异步组件已经支持在加载过程中展示 loading 组件的功能,如下代码取自官网:

    new Vue({ // ... components: { 'my-component': () => ({ // 异步组件 component: import('./my-async-component'), // 加载异步组件过程中展示的 loading 组件 loading: LoadingComponent, // loading 组件展示的延迟时间 delay: 200 }) }})复制代码

    :::tip delay 用于指定 loading 组件展示的延迟时间,如上代码中延迟时间为 200ms,如果异步组件的加载在 200ms 之内完成,则 loading 组件就没有展示的机会。 :::

    但它存在两个问题:

    • 1、loading 组件与异步组件紧密关联,无法将 loading 组件提升,并用于多个异步组件的加载。
    • 2、如果异步组件自身仍有异步调用,例如请求 API,那么 loading 组件是不会等待 API 请求完成之后才隐藏的。

    vue-async-manager 提供了 组件,可以解决如上两个问题。

    1、使用 lazy 函数创建异步组件

    过去我们创建一个异步组件的方式是:

    const asyncComponent = () => import('./my-async.component.vue')复制代码

    现在我们使用 vue-async-manager 提供的 lazy 函数来创建异步组件:

    import { lazy } from 'vue-async-manager' const asyncComponent = lazy(() => import('./my-async.component.vue'))复制代码

    如上代码所示,仅仅是将原来的异步工厂函数作为参数传递给 lazy 函数即可。

    2、使用 组件包裹异步组件

    loading
    复制代码

    只有当 和 全部加载完毕后,loading 组件才会消失。

    05ecd61e66275bdee0e4bc472e4ca19e.png

    :::tip Live Demo: 等待所有异步组件加载完毕 :::

    配合 vue-router 使用

    我们在开发 Vue 应用时,最常使用异步组件的方式是配合 vue-router 做代码拆分,例如:

    const router = new VueRouter({ routes: [ { path: '/', component: () => import('./my-async-component.vue') } ]})复制代码

    为了让 组件等待这个异步组件的加载,我们可以使用 lazy 函数包裹这个异步组件工厂函数:

    const router = new VueRouter({ routes: [ { path: '/', component: lazy(() => import('./my-async-component.vue')) } ]})复制代码

    最后我们只需要用 组件包裹渲染出口()即可:

    loading
    复制代码

    :::tip Live Demo: 配合 vue-router :::

    API请求中如何展示 loading

    过去,大多是手动维护 loading 的展示,例如“开始请求”时展示 loading,“请求结束”后隐藏 loading。而且如果有多个请求并发时,你就得等待所有请求全部完成后再隐藏 loading。总之你需要自己维护 loading 的状态,无论这个状态是存储在组件内,还是 store 中。

    现在来看看 vue-async-manager 是如何解决 API 请求过程中 loading 展示问题的,假设有如下代码:

    loading...
    复制代码

    在 组件内渲染了 组件,该组件是一个普普通通的组件,在该组件内部,会发送 API 请求,如下代码所示:

    {{ res }}
    复制代码

    这是我们常见的代码,通常在 created 或者 mounted 钩子中发送异步请求获取数据,然而这样的代码对于 组件来说,它并不知道需要等待异步数据获取完成后再隐藏 loading。为了解决这个问题,我们可以使用 vue-async-manager 提供的 createResource 函数创建一个资源管理器

    {{ $rm.$result }}
    复制代码

    为 createResource 函数传递一个工厂函数,我们创建了一个资源管理器 $rm,接着调用资源管理器的 $rm.read() 函数进行读取数据。大家注意,上面的代码是以同步的方式来编写的,并且 组件能够知道该组件正在进行异步调用,因此 组件将等待该异步调用结束之后再隐藏 loading。

    另外我们观察如上代码中的模板部分,我们展示的数据是 $rm.$result,实际上异步数据获取成功之后,得到的数据会保存在资源管理器的 $rm.$result 属性上,需要注意的是,该属性本身就是响应式的,因此你无需在组件的 data 中事先声明。


    :::tip Live Demo: Suspense 组件等待资源管理器获取数据完成 :::

    配合 vuex

    配合 vuex 很简单,只需要使用 mapActions 将 actions 映射为方法即可:

    export default { name: "AsyncComponent
    展开全文
  • vue方法调用/axios异步改为同步

    千次阅读 2020-06-16 16:37:32
    方法如上图就是方法声明上加async,调用方法时加 await ,就会有如上图紫色箭头的执行顺序,如果不加这两个声明,方法就会直接完再去调用异步请求的方法,造成问题,在vue开发中经常出现.

    在这里插入图片描述ES7中新提出async搭配await,建议使用async搭配await。方法如上图就是方法声明上加async,调用方法时加 await ,就会有如上图紫色箭头的执行顺序,如果不加这两个声明,方法就会直接完再去调用你异步请求的方法,造成问题,在vue开发中经常出现.

    另一种
    vue在一个方法执行完后执行另一个方法

    用Promise.all来实现。
    Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况
    使用方法:async/await使用方法
    示例:

    function fun1(){
        return new Promise((resolve, reject) => {
            /* 你的逻辑代码 */
            console.log("1");
        });
    },
    function fun2(){
        return new Promise((resolve, reject) => {
            /* 你的逻辑代码 */
            console.log("2");
        });
    },
    function fun3(){
        return new Promise((resolve, reject) => {
            /* 你的逻辑代码 */
            console.log("3");
        });
    },
    /* 调用 */
    function run(){
        Promise.all([
            this.fun1(),
            this.fun2(),
            this.fun3()
        ]).then(res => {
            /* 你的逻辑代码 */
            console.log("run");
        })
    }
    
    展开全文
  • vue 处理异步请求

    2021-01-29 15:20:56
    Vue处理异步请求一、使用promise处理异步二、使用async-await处理 一、使用promise处理异步 首先可以先了解一下ES6-promise的具体使用方法。 执行步骤: 1,实例化Promise(new Promise(function(resolve,reject)...

    总结一下目前我了解到的异步请求的几种方式,后续继续补充。

    一、使用promise处理异步

    首先可以先了解一下ES6-promise的具体使用方法。
    执行步骤:
    1,实例化Promise(new Promise(function(resolve,reject)))
    2,用Promise的实例调用then方法
    简单示例:

    function checkFunc() {
    let p = new Promise(function (resolve, reject) {
        // 一些比较耗时异步操作
        if(操作完成标识) {
            resolve();
        }
    });
    p.then(function (data) {
        layer.confirm('执行下一步操作?', {
            btn: ['确定', '取消']
        }, function () {
           // 确保上面的操作都完成后,才执行下面的操作
           // 其他操作...
        });
    });
    }
    

    应用:

    loadQuotaForm () {
      return new Promise((resolve, reject) => {
        quotaFormDetail(this.quotaId).then(resp => {
          this.quotaForm = resp.data.data
          // 重置表单
          this.dataForm.parentQuotaId = this.quotaForm.parent ? this.quotaForm.parent.quotaId : ''
          resolve(resp.data.data)//没参数 :resolve()
        })
      })
    },
    init(){
    //先执行loadQuotaForm 后将返回数据作为参数执行loadAndInitQuotaData
    	this.loadQuotaForm().then((quotaForm) => {
    	  // 加载并初始化指标数据
    	  this.loadAndInitQuotaData(quotaForm)
    	})
    }
    

    二、使用async-await处理

    使用async-await将使得整个函数延后执行,即同步的代码执行完毕后再执行;对于async函数的内部,使用了await的地方,会先执行,然后再执行函数内await之后的同步代码。

    mounted(){
      console.log('1');
      this.getXx();
      console.log('2')
    }
    methods:{
       async getXx(){
         await this.$http({
           url : xx,
           method:'get',
         })
         .then((res)=>{
           console.log('3');
         });
         //等待await执行完毕再执行下面的同步函数
         console.log('4')
       }
     }
    
    

    执行结果为:1 2 3 4

    展开全文
  • Vue异步请求

    千次阅读 2017-11-14 23:25:18
    Vue异步请求–getnew Vue({ el :'#app', data:{ obj:null }, created:function(){ this.getlist() //可以调用自身的方法 } methods:{ getdata:function(){ // 1.0 请求的ur

    Vue的异步请求–get

    new Vue({
        el :'#app',
        data:{
            obj:null
        },
        created:function(){
        this.getlist()  //可以调用自身的方法
        }
        methods:{
            getdata:function(){
                // 1.0 请求的url
                var url = 'http://vueapi.ittun.com/api/getprodlist'
    
                // 2.0 利用 vue-resource发出ajax的get请求
                this.$http.get(url)  //发出请求
                .then(function(response){
                    this.obj = response.body;
    
                }) // 获取服务器响应回来的数据
            }
        }
    });
    </script>

    Vue的异步请求–post

    new Vue({
        el :'#app',
        methods:{
            postdata:function(){
                // 将数据通过vue-resource的post方法提交给http://vueapi.ittun.com/api/addproduct
                 var url = 'http://vueapi.ittun.com/api/addproduct';
    
                 // 2.0 调用 $http.post(url,传入到服务器的请求报文体的数据,{emulateJSON:true})方法
                 this.$http.post(url,{name:'奔驰'},{emulateJSON:true})
                 .then(function(response){
                    alert(response.body.message);
                 });
            }
        }
    })
    </script>

    Vue的异步请求–jsonp

    <script>
    new Vue({
        el:'#app',
        data:{
            obj :null
        },
        methods:{
            getjsonp:function(){
                // 利用vue-resource中的jsonp方法实现跨域请求数据,这里注意的是
                // url后面不需要跟callback=fn这个参数了,jsonp方法会自动加上
                this.$http.jsonp('http://vueapi.ittun.com/api/jsonp')
                .then(function(response){
                    // 将服务器中的数据获取赋值给obj
                    this.obj = response.body;
                })
            }
        }
    
    });
    </script>
    展开全文
  • Vue中的同步调用异步调用

    千次阅读 2020-03-03 11:26:54
    异步调用,增加a、b两个方法,并在mounted中调用。 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用。 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用。 async /...
  • 1、流程顺序“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。2、角色定位基于流程顺序,二者扮演不同的角色。Mutation:专注于修改State,理论上是修改State的唯一途径...怎么调用...
  • 需求:两个异步函数按顺序...第一个异步方法: getAllNotice() { let data = { "searchParams": [{ "fieldName": "equipmentId", "operate": "eq", "value": "000000" }], "siz
  • 为什么vue采用异步渲染 原因: 1: 因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染。...当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会
  • 为何Vue采用异步渲染

    2020-08-31 08:53:21
    因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以考虑性能问题,Vue会在本轮数据更新之后,再去异步更新视图 原理: 首先调用dep.notify()通知watcher进行更新 调用watcher的subs.update...
  • 调用 axios 对象的方法来发起异步请求。 调用 axios 对象的方法来处理响应的数据。 案列结构 前端代码(test.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
  • 太顺序了 虽然await可以使您的代码看起来像同步,但请记住它们仍然是异步的,必须注意避免过于顺序 简单地说,您仍然需要异步考虑工作流,然后尝试同步编写代码await。在复杂的工作流程中,直接使用promises可能更...
  • 父组件调用子组件的表单验证方法异步的 // 子组件的方法 validateForm(){ this.$refs.jsonEditor.getRef("form").validate((valid, hints) => { return {valid: valid, hints: hints} }) } // 父组件调用...
  • 前言: 因为不采用异步更新,在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑,vue 会在...当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会...
  • 问题:由于get_roles方法存在处理时间长的问题,总是导致页面显示的时候,有显示不出来穿梭狂后面框里面内容的问题,经过2天的努力,终于找到原因,原来是异步调用的问题,需要设置等待时间,哎,一个简单的问题,搞...
  • Vue批量异步更新队列

    2020-08-16 21:26:23
    当数据发生更新的时候,会走defineProperty里面的set方法,set方法里面,会通过调用Dep.notify(),告诉watcher,需要进行数据的更新,页面渲染,这时候就会进入到watcher.js里面的update方法,进行入队操作。...
  • nextTick JS的运行机制:JS执行是单线程的,它是基于事件循环的对于事件循环的理解大致分为以下几个步骤...只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。 一旦”执行栈”中的所有同步任务执行完毕...
  • 按照官方提供的方法引入1.修改webpac.base.conf.js文件externals: {'AMap': 'AMap'}2.引入sdk引入有两种方式,一种是页面直接引入还有一种是异步加载function init(){var map = new AMap.Map('container', {center:...
  • // 父页面 // 父页面调用组件的html中添加事件 @test=“test” ... // 这里使用定时器内 模拟执行完容方法 console.log(data) // 这是传递过来的参数 用于处理 data++ cab(data) // 将处理完成的数据返回回去
  • 我们需要使用<code>vm.$nextTick方法异步获取DOM,例如: <pre><code>javascript Vue.component('example', { template: '<span>{<!-- -->{ message }}</span>', data: ...
  • 于是我在点击的方法里面,去后台异步调用了一下接口,然后返回数据并把数据赋值给menuIds,但是我发现这个异步请求获取到的数据压根就不能让树控件刷新。 代码如下,我是在handleCurrentChange里面操作的,网上说...
  • ES6之Promise解决VUE异步传值问题

    千次阅读 2019-03-07 16:22:20
    在使用vue开发页面时,调用 checkWorkflow()方法时无法获取到该方法的返回值 Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。 语法: new Promise( function(resolve, reject) {....
  • VUE中的同步和异步调用顺序

    千次阅读 2019-07-23 14:56:20
    VUE中的方法调用顺序是依次进行的,方法体内部也是依次执行的,但是,两个方法体的执行顺序并不能严格控制。 以下方法中都带有promise函数或异步调用。 initUserData() { this.getPsCountryList() // 1 获取国家...
  • 在这个过程中,就会出现一个坑,调用及执行了,导致封装方法中return的数据还没拿到,就已经执行。 下面看一下问题出现时的写法 去相应界面进行调用 此时的结果是拿不到值。 那么改如何解决这个问题,下面...
  • vue调用接口同步实现

    2021-02-25 11:40:37
    始终无法同步返回结果,在网上找了好多vue同步接口的方法,都是说在方法前加async,在接口名前加await,自己试了好长时间也不好使,最终只能选择用回调函数的方法来达到方法的同步调用,回调与同步、异步并没有直接...
  • 一、使用 async await 方法 async mouseleave(e,node,data){ ... // 调用 rightContent 组件中的 方法 await this.$refs.rightContent.callchildmethod(); }, 二、使用 this.$nextTick(()=>{{.
  • async用于申明一个函数是异步的,await等待异步请求完成,await只能在async方法中使用 注:在用axios发请求时如果使用了async…await,那么在调用发请求的函数时也需要加上标注 async 异步请求 和 await 同步 async ...
  • vue通常鼓励开发人员沿着...比如我们调用一个方法,同时涉及多个数据的操作改变,vue会把这一些列操作推入到一个队列中,相当于JavaScript的同步任务,在执行过程中可能会出现一些产生任务队列的异步任务,比如...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 307
精华内容 122
关键字:

vue调用异步方法

vue 订阅