axios 进行同步请求(async+await+promise)

遇到的问题介绍

将axios的异步请求改为同步请求
想到了async 和await、Promise

axios介绍

Axios 是一个基于 promise 的 HTTP 库,它支持 Promise API。

普通常见的请求

axios.post('getsomething').then(
res => {
// 进行一些操作
}
)

async 和 await

而 async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思,而 await 是 async wait的简写,即异步等待。

所以从语义上就很好理解 async 用于声明一个 函数 是异步的,而await 用于等待一个异步方法执行完成。
那么想要同步使用数据的话,就可以使用 async+await 。

// 假设这是我们要请求的数据
function getSomething(n) {
return new Promise(resolve => {
// 模拟1s后返回数据
setTimeout(() => resolve(222), 1000);
});
} function requestSomething() {
console.log(111);
getSomething().then(res => console.log(res));
console.log(333);
}
requestSomething() //这个时候会输出 111,333,222 // 如果想要等数据返回后再执行后面的代码,那么就要使用 async/await
async function requestSomething() {
console.log(111);
// 这时something会等到异步请求的结果回来后才进行赋值,同时不会执行之后的代码
const something = await getSomething();
console.log(something)
console.log(333);
}
requestSomething() //这个时候会输出 111,222,333

axios 进行同步请求(async+await+promise)的更多相关文章

  1. 理解koa2 之 async + await + promise

    koa是下一代的Node.js web框架. 我们首先使用koa来实现一个简单的hello world吧!假如目前的项目结构如下: ### 目录结构如下: koa-demo1 # 工程名 | |--- ...

  2. axios 等待同步请求用法及多请求并发

    axios等待同步请求 直接上代码 首先在函数中返回一个Promise对象,在调用函数使用同步函数,调用目标函数使用await等待即可 参考http://www.cnblogs.com/cckui/p ...

  3. async await promise 执行时序

    先用一个例子来说明async await promise的执行顺序 console.log('start'); async function test(){ console.log('111'); a ...

  4. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  5. axios 模拟同步请求

    axios本身没有同步请求,但是我们很多情况下必须得需要同步请求.那么应该怎么做? 上网查了一些资料有人说用es6的 async +  assert 我不知道有没有效果,因为我的功能中是没啥效果的. ...

  6. async await promise

    async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{ }时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise ...

  7. Async/await promise实现

    An async function can contain an await expression that pauses the execution of the async function an ...

  8. 8张图让你一步步看清 async/await 和 promise 的执行顺序

    摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...

  9. 8 张图帮你一步步看清 async/await 和 promise 的执行顺序(转)

    https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...

  10. ES6入门十一:Generator生成器、async+await、Promisify

    生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...

随机推荐

  1. 47.DRF实现分页

    分页Pagination   当我们在PC 或者 App 有大量数据需要展示时,可以对数据进行分页展示.这时就用到了分页功能,分页使得数据更好的展示给用户   比如我们有1W+数据要返回给前端,数据量 ...

  2. [python] 基于chardet识别字符编码

    对于人类能够识别的字符,计算机会根据某一对应关系将其转换为二进制形式进行保存.这个对应关系就是字符编码表,即什么样的字符对应什么样的二进制编码.这种字符编码表往往是多种多样的,因此,如果我们想要将一个 ...

  3. solidity 内存(memory) 可变数组的增删改查 操作

    // SPDX-License-Identifier: MIT pragma solidity ^0.8.9; library Array { function push(uint256[] memo ...

  4. elasticsearch之exists查询

    一.exists查询简介 elastic search提供了exists查询,用以返回字段存在值的记录,默认情况下只有字段的值为null或者[]的时候,elasticsearch才会认为字段不存在: ...

  5. 根号分治简单笔记 | P3396 哈希冲突

    简要题意 你需要维护一个长度为 \(n\) 的序列 \(v\),支持: A x y 求整个序列中,所有模 \(x\) 为 \(y\) 的下标的元素的值,即: \[\sum_{i=0}^{\lfloor ...

  6. AtCoder Beginner Conest 284 解题报告

    AtCoder Beginner Conest 284 解题报告 \(\text{By DaiRuiChen007}\) \(\text{Contest Link}\) A. Sequence of ...

  7. dinic及当前弧优化

    网络流 dinic及当前弧优化 前言 dinic比较适合学习完km之后再学习.因为dinic感觉像是km的一种优化.总之难度不是特别大 dinic算法 好了,言归正传.先分析一下km为什么效率低下?因 ...

  8. BBS项目功能编写逻辑思路汇总

    BBS项目功能编写逻辑思路汇总 一.BBS创数据表 二.BBS注册功能 三.BBS登录功能 四.BBS首页搭建 五.BBS修改密码 六.BBS个人站点 七.BBS文章详情 八.BBS导入模块 九.BB ...

  9. 今日实际操作----Dart Mac开发与运行环境配置 配置.bash_profile

    Mac 打开.编辑 .bash_profile 文件 一般在Mac上配置环境变量时经常要创建.编辑 .bash_profile文件.创建该文件时一般都会选择在当前用户目录下,即Mac下的.bash_p ...

  10. 分布式协议与算法-Paxos算法

    1.Basic Paxos 假设我们要实现一个分布式集群,这个集群是由节点 A.B.C 组成,提供只读 KV 存储服务.你应该知道,创建只读变量的时候,必须要对它进行赋值,而且这个值后续没办法修改.因 ...