首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用asyncawait封装axios

在最近的vue开发中ajax库选择了axios,需要根据回调函数的参数执行一个很长的代码块,执行函数加上axios参数代码量非常大不便于后期的优化代码维护,于是我上网寻求axios异步的放法,被告知axios...是promise返回值没有同步,如果代码量大可以尝试自行封装,于是研究了asyncawait ES6Promise: new Promise(function (resolve, reject) {...就是将一个普通函数返回为promise,当然在学习asyncawait时你需要先了解promise的用法 async function test() { return 'a' } test()...函数的参数 await只能使用在promise中(包括async的返回函数)其用途和他的中文含义差不多:等待,意思是必须等到加await的函数结束promise才会继续执行 import axios from...'axios'; async function createType(getData) { let data; await axios({ method: "POST

1.6K10

promise & axios & async_await 关于 Promise

,下面的继续执行 console.log(err); }) ​ promise的then链式调用仍然是层层依赖的逻辑但是不会像“地狱回调”那么不美观不易于维护 promise & axios axios...【特点】 (1)async声明的函数的返回本质上是一个Promise,所以可以用.then (2)async必须声明的是一个function,那么await就必须是在当前这个async声明的函数内部使用...(而且不能在其子函数内使用),他两个是配合使用的。.../await说到,通常async/await是跟随Promise一起使用的,而axios又是基于promise封装,所以我们可以将 async/awaitaxios 结合一起使用。...const demo =async () => { //第一个异步promise(axios)接口请求数据 const result1 = await this.

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    asyncawait

    asyncawait 概念 先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。...在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。这普通返回 Promise 对象的函数并无二致。...因为 async 函数返回一个 Promise 对象,所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数,但要清楚,它等的实际是一个返回值。...又一个疑问产生了,这两段代码,两种方式对异步调用的处理(实际就是对 Promise 对象的处理)差别并不明显,甚至使用 async/await 还需要多写一些代码,那它的优势到底在哪?...我们仍然用 setTimeout 来模拟异步操作: 现在用promise实现这三个步骤的处理 输出结果 结果之前的 Promise 实现是一样的,但是这个代码看起来是不是清晰得多,几乎跟同步代码一样

    1K30

    使用 Async Await 的异步编程

    在本文中,你将通过做早餐的指令示例来查看如何使用 async await 关键字更轻松地推断包含一系列异步指令的代码。你可能会写出与以下列表类似的指令来解释如何做早餐: 倒一杯咖啡。...编写服务器程序时,你希望线程受到阻塞。这些线程可以用于处理其他请求。存在异步替代项的情况下使用同步代码会增加你进行扩展的成本。你需要为这些受阻线程付费。 成功的现代应用程序需要异步代码。...上述代码展示了可以使用 Task 或 Task 对象来保存运行中的任务。你首先需要 await 每项任务,然后再使用它的结果。下一步是创建表示其他工作组合的方式。...你可以使用以下代码表示此工作: C#复制 static async Task MakeToastWithButterAndJamAsync(int number) { var toast...async await 的语言功能支持每个人做出转变以遵循这些书面指示:尽可能启动任务,不要在等待任务完成时造成阻塞。

    1.1K30

    使用图解例子解释AwaitAsync

    如果您需要以某种顺序从多个数据库或API异步获取数据,则可以使用promise回调构成的面条式的代码。 async/await 构造允许我们更简洁地表达这种逻辑且代码更易读可维护。...本教程将使用图表简单示例来解释JavaScriptasync/await 语法语义。 在我们开始之前,让我们从一个Promise的简要概述开始。...当我们使用await关键字。 它只能用于async功能,并允许我们同步等待Promise。...讨论 Async/await是一种对Promise的语言上的补充。 它允许我们以较少的样板来使用Promise。 但是,Async/await不能取代纯粹Promise的需要。...Async/await结构是更符合Promise的语法糖。 每个Async/await结构可以用简单的Promise重写。 所以,这是一个风格简洁的问题。

    1.4K20

    asyncawait使用总结 ~ 竟然一直用错了c#中的asyncawait使用。。

    对于c#中的asyncawait使用,没想到我一直竟然都有一个错误。。 。。还是总结太少,这里记录下。 这里以做早餐为例 流程如下: 倒一杯咖啡。 加热平底锅,然后煎两个鸡蛋。 煎三片培根。...可以看出,这样编写的异步最初同步版本的总共的耗时大致相同。 这是因为这段代码还没有利用异步编程的某些关键功能。 即上面的异步代码的使用在这里是不准确的。...但是,对于这里而言,我希望每个任务都按顺序依次执行。 最好是首先启动每个组件任务,然后再等待之前任务的完成。 例如:首先启动鸡蛋培根。...; } 高效的等待任务 可以通过使用Task类的方法改进上述代码末尾一系列await语句。...总结: async await的功能最好能做到: 尽可能启动任务,不要在等待任务完成时造成阻塞。 即可以先把任务存储到task,然后在后面需要用的时候,调用await task()方法。

    1.8K10

    Vue中异步:Asyncawait使用

    bug收集:专门解决与收集bug的网站 最近,在写在项目中很多的地方,用到了asyncawait。...发现了理解的有些不一样, 下面有几道网上看到的题,大家可以做做,看看和你想的是否一样 async function test() { console.log(0) await console.log...会阻塞该方法内部后续的进程(等待时间比同步方法久,先执行同步方法) 再看以下示例帮助理解: let x = 0; async function test() { x += await 2;...正确答案是:2 首先我们先记住一句话,那就是异步函数(async方式声明的函数)代表其函数内部的所有代码都是异步方式执行的,这句话什么意思呢?...0替换,然后才轮到test函数外的x = 1这行代码执行,x += await 2相当于x = 0 + await 2,所以最终输出:2 现在,我们稍微对上面的代码做一下修改: let x = 0; async

    29310

    ES8 Async Await

    Async Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作...一、Async Async 自动将常规函数转换成 Promise,返回值一个 Promise 对象,使用 async 的效果: async function f() { return 123 }...,得到 resolve 的值作为 await 表达式的运算结果 未使用 await 的效果: async function f() { let promise = new Promise((resolve...使用 await 的效果: async function f() { let promise = new Promise((resolve) => { setTimeout(() => resolve...在拿到这个结果之前不会执行后面的代码,会一直等到拿到这个结果才往后继续执行 注意: await 后面如果不是 Promise 对象会自动包装成 Promise 对象 await 只能在 async

    44420

    setTimeout、Promise、asyncawait区别

    image.png setTimeout setTimeout是宏任务,会插入到宏任务(Task Queue)中;setTimeoutsetInterval的运行机制是,将指定的代码移出本次执行,等到下一轮...asyncawait 是generator的语法糖,asyn对generator改进,1.内置执行器,async函数执行普通函数一样,一个括号搞定,2.更好的语义,3,async函数await后面可以是...promise也可以是原始类型值(数值/字符串/布尔值,但是这时等于同步操作),同 Generator 函数一样,async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。...当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。

    66320

    Async,AwaitConfigureAwait的关系

    虽然async / await让异步编程更简单,但是有一些你可能不知道的细节注意的地方 新关键字 微软在.NET框架中添加了asyncawait关键字。...但是,使用它们,方法的返回类型应为Task类型。(我们将在稍后讨论例外情况)为了使用await关键字,您必须在方法定义中使用async。...当您使用async/await时,只处理该线程,并让其他线程使用它。代码的作用类似于“同步”,因为您可以在await之后以本方法继续执行代码。...如果一不小心,便会引发大批量的死锁 如果有同步方法调用异步方法,则必须使用ConfigureAwait(false)。如果这样做,就会立即掉进死锁陷阱。...如果这样做,就会导致另一个死锁。这里的问题是,每个async/ await对于调用它的当前方法都是本地的。因此,调用链的每个异async/await都可能最终在不同的线程上恢复。

    70110

    【-FlutterDart 语法补遗-】 sync* async* 、yield yield* 、async await

    前言 类别 关键字 返回类型 搭档 多元素同步 sync* Iterable yield、yield* 单元素异步 async Future await 多元素异步 async* Stream...-- 2020-05-20T07:01:07.169832 ---- 二、异步处理: asyncawait async是一个dart语法关键字。...---- 三、多元素异步函数生成器: 1.async*yield、await async*是一个dart语法关键字。...它标注在函数{ 之前,其方法必须返回一个 Stream对象 下面fetchEmojis被async*标注,所以返回的必然是Stream对象 注意被async*标注的函数,可以在其内部使用yield...---- 2.async*yield*、await 上面的yield*同理,async*方法内使用yield*,其后对象必须是Stream对象 如下getEmojiWithTime对fetchEmojis

    5.1K40

    AsyncAwait异步编程的原理

    因为在很多文档里针对AsyncAwait这两个关键字的使用都被称为异步编程,为了更符合大众的阅读习惯,我们使用异步编程这个叫法,意思上并行编程完全一样。...关于AsyncAwait异步编程的功能说明使用介绍,MSDN上有详细文档,链接如下: http://msdn.microsoft.com/en-us/library/vstudio/hh191443...AsyncAwait的实现 前面提到了yield关键字,用于简化遍历的实现。如果您熟悉yield这个关键字的应用,就会发现await关键字的出现位置、使用方式以及运行逻辑yield是如此的相似。...事实的确如此,awaitasync也是一种基于编译器的功能(C#VB.NET都提供了这个功能),不仅如此,它在实现原理上也yield非常像——await/asyncyield都被编译器在编译时转化为了状态机...在学习使用async/await的时候,很多文档包括msdn都刻意提到async/await关键字不会创建新的线程,用async关键字写的函数中的代码都在调用线程中执行。

    1.1K10
    领券