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. UVA439 Knight Moves

    原题Vjudge 题目大意 有一个骑士,他可以骑马日字型跳跃,问他从A点到B点最少要几步 解题思路 这题就是一个特别裸的广搜板子 它的主要问题在于输入输出 输入的数据我们可以用\(pair\)读入,第 ...

  2. 分享一个自己在用的.net 中mysql事务控制类(支持多条sql,参数化,自定义判断条件,错误点返回等)

    1)首先看下事务控制器. using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using Sys ...

  3. Android录屏实现

    使用方案: mediacodec + mediaprojection + mediamuxer MediaProjectionManager主要作用是获得录屏权限 startActivityForRe ...

  4. js鼠标轨迹特效

    今天无意中访问到了开源社区 (apiopen.top)的主界面,发现鼠标跟随的特效不错(残留轨迹),弄下来玩玩 上代码 整合后只需要两部分,导入JS依赖后,在html 添加 id 为 mouseCan ...

  5. 数论专项复习(一)扩展欧几里得算法(exgcd)

    简介 扩展欧几里得算法(简称扩欧,exgcd),用来求下列方程的一组解: \[ax+by=(a,b) \] 算法介绍 1. 裴蜀定理 裴蜀定理(Bézout's lemma):若 \(a\in \ma ...

  6. 数据结构与算法 -> 大顶堆与小顶堆

    一.大顶堆 大顶堆是一种数据结构,它是一颗完全二叉树,并且满足以下性质: 每个节点的值都大于或等于它的子节点的值 因此,大顶堆的根节点(也称为堆顶)总是最大的元素 二.小顶堆 小顶堆也是一种数据结构, ...

  7. 算法之SPFA的前置:Bellman-Ford算法

    SPFA 我们都知道一个叫SPFA的算法,它是用来计算单源最短路径的,但是,众所周知它不是很稳定,容易退化. SPFA是基于什么被提出的? 基于一个叫做Bellman-Ford的算法. Bellman ...

  8. 解析url地址hashhref

  9. 脱坑记录--- removeEventListener 移除事件监听失败的经历--vue--keep-alive-----完美实现echarts自适应屏幕~~~~

    下面开始讲述事情经过~~~~ 页面代码是这样的 <template> <page-view :title="title"> <div id=" ...

  10. 行为型模式 - 解释器模式Interpreter

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 模式的定义与特点 解释器模式(Interperter Pattern),给定一个语言,定义它的文法表示,并定义一个解释器,这个解 ...