执行完一个方法再执行另一个方法（async、await、promise）

最新推荐文章于 2024-04-24 15:21:03 发布
最新推荐文章于 2024-04-24 15:21:03 发布
阅读量3.5k 收藏 3
点赞数
文章标签： es6 js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bidepanm/article/details/118736122
版权

需求：点击发送时先执行完temSaveOperation()方法再去执行sendCgOperation()方法。

// 点击暂存执行操作
        temSaveOperation() {
            return new Promise((resolve, reject) => {
                const _route = this.$route;
                this.templateId = _route.params.templateId;
                if (_route.query && _route.query.id) {
                    // 在原有草稿上进行编辑，只向后台发送新增文件
                    this.addBqContent(resolve, reject);
                } else {
                    // 新增便签
                    this.newBq(resolve, reject);
                }
            });
        },
        // 新建便签
        newBq(resolve, reject) {
            // 新建 ajax 配置
            const newBqAjaxOptions = {
               
            };

            // 如果是第一次点击暂存就新增一条数据
            if (!this.isClickTemSave) {
                // 获取数据
                this.requestNewBq(newBqAjaxOptions)
                    .then(data => {
                        resolve(data);
                    })
                    .catch((error) => {
                        reject(error);
                    });
                // 已经点击过暂存
                this.setClickTemSave(true);
            } else {
                // 不是第一次点击，则只向后台发送新增文件
                this.addBqContent();
            }
        },
        // 设置是否点击过暂存
        setClickTemSave(isClickTemSave) {
            this.isClickTemSave = isClickTemSave;
        },
        // 增加便签内容
        addBqContent(resolve, reject) {
            // 增加内容 ajax 配置
            const addBqContentAjaxOptions = {
                
            };
            // 获取数据
            this.requestAddBqContent(addBqContentAjaxOptions)
                .then((data) => {
                    resolve(data);
                })
                .catch((error) => {
                    reject(error);
                });
        },

sendCg() {
    // 暂存
     this.temSaveOperation()
         .then(() => {
             // 发送
             this.sendCgOperation();
         });
 },

或者：

async sendCg() {
    // 暂存
    await this.temSaveOperation();
    // 发送
    this.sendCgOperation();
},

示例：

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


<script>
    var data = '';

    async function a() {
        await b();
        d();
    }

    function b() {

        return new Promise((resolve, reject) => {
            c(resolve, reject);
        })

    }

    function c(resolve, reject) {
        setTimeout(() => {
            data = '张三';
            resolve();
        }, 1000);
    }

    function d() {
        console.log('data:', data);
    }

    a();

</script>
</body>
</html>
bidepanm
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6 async、await的基本使用方法示例
11-20
本文实例讲述了ES6 async、await的基本使用方法。分享给大家供大家参考，具体如下： async是异步编程的最新标准，我们来看看async如何使用 1.async的简单使用 async function fn () { return 'abc' } console.log(fn()); // Promise { 'abc' } fn().then(res => { console.log(res); // "abc" }) async作为关键字放在函数前面，让同步的函数成为异步函数，不关函数里返回什么，
vue在多方法执行完后再执行另一个方法（等待请求完数据再执行）async/await使用方法
HelloWord176的博客
06-17 8338
vue 中的 async await 异步 等待 按顺序执行
使用async await 封装 axios的方法
12-04
es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以建一个api.js文件,全局创建api实例. import axios from 'axios' const qs = require('qs') const api = { async get (url, data) { try { let res = await axios.get(url, {params: data}) res = res.data return
Js中async/await的执行顺序详解
12-11
前言 虽然大家知道async/await，但是很多人对这个方法中内部怎么执行的还不是很了解，本文是我看了一遍技术博客理解 JavaScript 的 async/await（如果对async／await不熟悉可以先看下这篇文章）后拓展了一下，我理了一下await之后js的执行顺序，希望可以给别人解疑答惑，先简单介绍一下async／await。 async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。 async/await 是建立在 promise 的基础上。 async/await 像 promise 一样，也是非阻塞的。 async/a
大白话讲解Promise（一）
aigenglong0649的博客
03-11 1万+
去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛 复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？...
vue中函数执行完再执行另一个函数
zhengyun1568的博客
08-24 7460
转载自：https://blog.csdn.net/MonsteriU/article/details/103782752 promise实现 function1(){ // 你的逻辑代码 return Promise.resolve() } function2(){ // 你的逻辑代码 return Promise.resolve() } // 调用 function3(){ this.function1().then(val => {
vue async await promise 等待异步接口执行完毕再进行下一步操作
gdgztt的专栏
02-06 6323
上传多个文件，每上传一个文件异步请求一下后台接口，并返回一个新文件名，等把所有的异步接口执行成功后，将上传已成功后新文件名数组得到再去更新业务数据。选择文件后，上传到服务器后端，一个一个的传，等异步执行完一下再执行下一个。
vue 中 async await 等第一个请求返回数据完，再执行第二个请求,解决请求异步问题
JohnnyAo的博客
09-17 1万+
例如第二个请求里参数，是从第一个接口中拿到的 asyncgetOrderDto(){ awaitthis.$get("url"+this.dataId) .then(data=>{ if(data){ this.orderDto=data; } }) .catch(error=>{ }); aw...
在一个JS方法里，如何实现先执行一个函数再执行另一个函数
z2000ky的博客
05-23 5926
在 JavaScript 中，你可以使用不同的方法来确保一个方法在另一个方法之前执行。你可以在一个方法中定义一个回调函数，然后在另一个方法中调用这个回调函数，以确保它们的执行顺序。你可以使用事件监听来确保一个方法在另一个方法之后执行，尤其在涉及异步操作或事件驱动的情况下。根据情况选择合适的方法来确保方法的执行顺序。如果你的方法是异步的，你可以使用 async/await 来确保它们按顺序执行。使用 Promise 可以更灵活地处理异步操作，并确保它们按照预期的顺序执行。
vue中方法体内未严格按照执行顺序执行（自上而下，依次执行 ，有用）
weixin_38345306的博客
07-27 4391
注意： VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的， 但是，两个方法体的执行顺序并不能严格控制，不一定一个方法执行完再执行另一个 下面来说一下涉及到axios请求时的执行顺序 我们要求的执行顺序是： 发送axios请求，更新数据至数据库–》重新获取数据库中的更新后的数据 我的测试： 如果按下面这种格式写，执行出来的结果是更新之前的， 因为post方法还没执行完，getUserList方法就开始执行了（没有严格的控制执行顺序） //发送axios请求，更新数据至数据库 this.$http
async/await让异步操作同步执行的方法详解
12-13
我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以...
Async/Await替代Promise的6个理由
10-16
主要介绍了Async/Await替代Promise的6个理由，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
vue循环接口，等第一个响应后在执行下一个（同步）
刘刘刘的博客
10-16 805
【代码】vue循环接口，等第一个响应后在执行下一个（同步）
java中等待一些线程执行完之后，再去执行别的方法（后者需要使用前者返回的结果）
GXQ的博客
04-30 1172
转：https://blog.csdn.net/jaryle/article/details/74905379 Java主线程等待所有子线程执行完毕在执行，这个需求其实我们在工作中经常会用到，比如用户下单一个产品，后台会做一系列的处理，为了提高效率，每个处理都可以用一个线程来执行，所有处理完成了之后才会返回给用户下单成功。 我们通过以下的几种方法来解决： 一、用sleep方法，让主线程睡眠一段时间...
vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式
热门推荐
weixin_40476233的博客
11-12 2万+
一、开始用forEach的方式去请求，发现无法捕获到错误的请求接口，有错误也会循环也会继续执行 let refreshParam = []; // 获取用户的设备列表 refreshParam.forEach( (param,index)=>{ console.log("refreshParam[index]") console.log(refreshParam[index]) if(index <= refreshIndex){ // 提交刷新设备
async函数用法
别浪
06-06 996
1、不需要像Generator去调用next 方法，遇到await等待，当前的异步操作完成就往下执行。3、async取代Generator西数的星号*，await取Generator的yield。2、返回的点是promise对象，可以用then 万法进行下一步操作。真正意义上解决异步回调的问题，同步流程表达异步操作。4、语意上更为明确，使用简单。Generator的语法糖。解决报错后面代码不执行，
js中等待函数执行完成再执行后续语句的方法(async和await)
hhue2007的专栏
06-28 1万+
javascript中的同步顺序执行语句设置的关键词，async和await
【译】JavaScript的工作原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式...
玄魂工作室
01-11 211
“此篇是JavaScript的工作原理的第四篇，其它三篇可以看这里：【译】JavaScript的工作原理：引擎，运行时和调用堆栈的概述【译】JavaScript的工作原理：V8引擎内部...
ES5、ES6类的定义
最新发布
m0_60376759的博客
04-24 311
1、想要给类中传值，在ES6里面所有的类都可以实现一个方法 constructor（构造方法）2、可以当成普通函数调用，但一般都通过new关键字调用，通过关键字调用会生成一个新的对象。3、通过new关键字创建的对象，给当前的this绑定成新创建的对象。2、类中定义方法直接写在类里面，与ES5中原型绑定方法效果是一致的。（2）多态的前提（弱类型语言鸭子类型）4、给当前类定义一个方法，通常绑定在原型上。1、类名首字母一般都是大写。
Promise 和 async/await执行顺序
06-09
`Promise` 和 `async/await` 的执行顺序都基于 JavaScript 事件循环机制。 在 `Promise` 中，异步操作会被添加到事件队列中，然后按照队列中的顺序执行。在执行过程中，如果遇到了异步操作，就会将其添加到事件队列中等待执行。当所有的同步任务执行完毕后，才会开始执行异步任务。 在 `async/await` 中，异步操作会被转化成一个 `Promise` 对象，并使用 `await` 等待异步操作的结果。在执行过程中，如果遇到了 `await`，JavaScript 引擎会暂停当前的异步操作，并等待 `Promise` 对象的状态变为 `resolved` 或 `rejected`，然后再继续执行后面的代码。 下面是一个简单的例子，演示了 `Promise` 和 `async/await` 的执行顺序： ``` // 使用 Promise console.log('start'); new Promise((resolve, reject) => { console.log('Promise1'); resolve(); }) .then(() => { console.log('Promise2'); }); console.log('end'); // 使用 async/await async function asyncFunc() { console.log('start'); await new Promise((resolve, reject) => { console.log('Promise1'); resolve(); }); console.log('Promise2'); console.log('end'); } asyncFunc(); ``` 在 `Promise` 中，首先输出了一个 `start`，然后创建了一个 `Promise` 对象并添加到事件队列中，接着输出了一个 `end`，最后在异步任务执行完毕后输出了 `Promise2`。 在 `async/await` 中，首先输出了一个 `start`，然后创建了一个 `Promise` 对象并使用 `await` 等待其执行结果，接着输出了一个 `Promise2` 和一个 `end`。 因此，最终的输出结果分别是： ``` // Promise start Promise1 end Promise2 // async/await start Promise1 Promise2 end ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值