axios中如何进行同步请求(async+await)

目录
  • axios进行同步请求(async+await)
    • 介绍
    • 代码示例
  • axios使用async/await对promise进行优化
    • 解释

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

介绍

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

像这样:

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

而 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进行优化

利用promise解决了发送ajax的回调地狱问题,是代码看起来简洁了许多

但是如果要按顺序发送多次请求,还是有些麻烦的,因为我们需要一直去.then来得到结果,所以在ES7中有了一种新的语法:async/await,可以更加方便的进行异步操作,先看一下上面的请求如果在axios中用这个语法来写是什么效果:

 axios.defaults.baseURL = 'http://localhost:3000';
        async function queryData() {
            var ret = await axios.get('/data');
            var ret1 = await axios.get('/data1');
            var ret2 = await axios.get('/data2');
            return [ret, ret1, ret2];
        }
        console.log(queryData());

第一行代码是给axios设置了一个公共请求路径localhost:3000;

代码看起来更加简洁,就像是同步执行一样,省略了.then取到结果的过程,

结果:

可以看到,得到的还是promise对象,同时按顺序拿到了三个请求任务的结果;

解释

1、axios基本用法

	axios.get('http://localhost:3000/adata')
    .then(function(ret){
      // 注意data属性是固定的用法,用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })

axios中数据存放在ret.data中,想要得到结果同样需要.then一下

2、async基本用法

async/await 处理异步操作:

  • async函数返回一个Promise实例对象
  • await后面可以直接跟一个 Promise实例对象

await + promise实例对象=要得到的结果

  		// async总结
        //1, 有async标识的函数称之为 异步函数,
        //2, 有async关键字出现,await可以不出现
        //3, 有await出现,async必须出现
        axios.defaults.baseURL = 'http://localhost:3000';
        async function queryDate() {
            // await的作用就是将异步函数变成同步操作
            var ret = await axios.get('/adata')
            console.log(ret.data);
        }
        queryDate();

结果:

也就是说,通过await可以直接取到promit实例对象的结果,而不用再.then来获取,这样一来,就相当于将异步的请求变成了同步任务;

这样的话我们回到最初的问题,按照一定的顺序来发送网络请求,下次请求需要用到上次请求所获取的数据. 现在如何实现呢?

接口是这样的:

想要的到 world,则必须携带async1请求得到的数据hello

 axios.defaults.baseURL = 'http://localhost:3000/';
    async function queryData() {
      var info = await axios.get('async1');
      console.log(info.data);
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }
    queryData().then(function (data) {
      console.log(data)
    })

打印结果:

代码看着就很舒服

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue axios库发送请求的示例介绍

    目录 1.什么是axios 2.axios请求图例 3.使用 async 和 await 配合 axios 发起请求 4.使用解构赋值 5.使用 axios.get() axios.post() 来简化请求过程 1.什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象

  • 详解vue中async-await的使用误区

    曾经见过为了让钩子函数的异步代码可以同步执行,而对钩子函数使用async/await,就好像下面的代码: // exp-01 export default { async created() { const timeKey = 'cost'; console.time(timeKey); console.log('start created'); this.list = await this.getList(); console.log(this.list); console.log('end

  • vue中用 async/await 来处理异步操作

    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面, async function timeout() { return 'hello world'; } 只有一个作用, 它的调用会返回一个promise 对象.调用一下看看就知道了,怎么调用?async 函数也是函数,所以它的调用和普通函数的调用没有什么区别,直接加括号调用就可

  • axios中如何进行同步请求(async+await)

    目录 axios进行同步请求(async+await) 介绍 代码示例 axios使用async/await对promise进行优化 解释 axios进行同步请求(async+await) 介绍 Axios 是一个基于 promise 的 HTTP 库,它支持 PromiseAPI. 像这样: axios.post('getsomething').then(     res => {         // 进行一些操作     } ) 而 async/await 是一种建立在Promise之上的

  • JS中如何优雅的使用async await详解

    目录 jQuery的$.ajax Webpack时代的开始 深入了解Promise 消灭嵌套 await-to-js 总结 jQuery的$.ajax 在开始之前我们先来聊聊我的js异步之路.在我还在学校的时候,那时候还是 jQuery 的天下,我直接接触到并且经常使用的异步操作就是网络请求,一手 $.ajax走天下,伴我过了大二到毕业后差不多大半年的时间. $.ajax( "/xxx" ) .done(function() { // success !!! do something.

  • 详解C#中 Thread,Task,Async/Await,IAsyncResult的那些事儿

    说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部分可以同时执行:对于比较耗时的操作(例如io,数据库操作),或者等待响应(如WCF通信)的操作,可以单独开启后台线程来执行,这样主线程就不会阻塞,可以继续往下执行:等到后台线程执行完毕,再通知主线程,然后做出对应操作! 在C#中开启新线程比较简单 static void Main(string[]

  • 详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)

    •基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 •vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios •功能特性 •在浏览器中发送 XMLHttpRequests 请求 •在 node.js 中发送 http请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换 JSON 数据 •客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击

  • 微信小程序中使用 async/await的方法实例分析

    本文实例讲述了微信小程序中使用 async await的方法.分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login().wx.request().wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success().fail() 和 complete() 作为异步调用不同情况下的回调. 但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情: wx.getStorage() 获取缓存数据,检查登录状态 wx.getSe

  • 避免地狱async await的使用及原理解析

    目录 引言 谎言和async/await 错误处理 同步代码 async/await try/catch的尴尬 Promise 更关键的一点 回调地狱 promise天堂 总结 引言 无论你对async/await的立场如何,我都想向你说明,根据我的经验,为什么async/await往往会使代码复杂度更高,而不是更低. JavaScript中的async/await功能的效用是基于这样的想法:异步代码很难,相比之下,同步代码更容易.这在客观上是正确的,但在大多数情况下,我不认为async/awa

  • 使用async await处理错误方法示例

    目录 Promise封装请求 async/await await-to-js 源码很简单 使用很简单 Promise封装请求 大家平时如果使用Promise封装请求,那么当你使用这个请求函数的时候是这样的: // 封装请求函数 const request = (url, params) => { return new Promise((resolve, reject) => { // ...do something }) } // 使用时 const handleLogin = () =>

  • vue如何使用async、await实现同步请求

    这篇文章主要介绍了vue如何使用async.await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 以下是vue method的demo: loadTableData : async function() { var reses = await $.ajax({ type:'post', url:'/linewell/system/user/queryPageList.do'/*, }); console.log("reses&q

  • 使用async await 封装 axios的方法

    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, {

  • 微信小程序中使用Async-await方法异步请求变为同步请求方法

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c

随机推荐