返回顶部
首页 > 资讯 > 前端开发 > JavaScript >axios中如何进行同步请求(async+await)
  • 250
分享到

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

2024-04-02 19:04:59 250人浏览 安东尼
摘要

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

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

介绍

Axios 是一个基于 promise 的 Http 库,它支持 Promise api

像这样:

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)
    })

打印结果:

代码看着就很舒服

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

--结束END--

本文标题: axios中如何进行同步请求(async+await)

本文链接: https://lsjlt.com/news/167125.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • axios中如何进行同步请求(async+await)
    目录axios进行同步请求(async+await)介绍代码示例axios使用async/await对promise进行优化解释axios进行同步请求(async+await) 介绍...
    99+
    2024-04-02
  • Node.js中Express框架使用axios同步请求(async+await)实现方法
    axios一般是作为异步请求使用的,但是某种特殊情况下需要同步请求,如何实现呢? 首先定义一个方法syncAxios let axios = require('axios'); e...
    99+
    2023-05-15
    Node.js Express axios 同步请求 async await
  • 微信小程序中如何使用Async-await方法异步请求变为同步请求方法
    这篇文章给大家分享的是有关微信小程序中如何使用Async-await方法异步请求变为同步请求方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序中有些 Api 是异步的,...
    99+
    2024-04-02
  • async/await如何让异步操作同步执行
    小编给大家分享一下async/await如何让异步操作同步执行,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一.前言我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的...
    99+
    2024-04-02
  • 如何用ES7中的Async和Await进行异步编程
    这篇文章给大家介绍如何用ES7中的Async和Await进行异步编程,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Async/Await基本规则async 表示这是一个async函数,...
    99+
    2024-04-02
  • vue中如何进行异步请求
    目录如何进行异步请求一、axios实现异步请求二、vue-resource实现异步请求(和axios步骤基本相同)vue接口异步请求其他方法如何进行异步请求 一、axios实现异步请...
    99+
    2024-04-02
  • React Native如何使用axios进行网络请求
    本篇内容主要讲解“React Native如何使用axios进行网络请求”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React Native如何使用axios进行网络请求”吧!在前端开发中,能...
    99+
    2023-06-20
  • Node.js中Express框架怎么使用axios同步请求
    这篇文章主要介绍了Node.js中Express框架怎么使用axios同步请求的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Node.js中Express框架怎么使用axios同步请求文章都会有所收获,下面我们...
    99+
    2023-07-06
  • axios中如何写ajax请求
    这篇文章给大家分享的是有关axios中如何写ajax请求的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。优点:增加一个ajax接口,只需要在配置文件里多写几行就可以不需要在组件中写...
    99+
    2024-04-02
  • 如何在 Vue 中使用 Axios 异步请求API
    目录设置基本 HTTP 请求 Axios 配合 async/await Axios 的错误处理 发送POST请求 用 Axios 编写可复用的 API 调用 最终代码设置基本 HTT...
    99+
    2024-04-02
  • vue2.0如何设置proxyTable使用axios进行跨域请求
    小编给大家分享一下vue2.0如何设置proxyTable使用axios进行跨域请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • Swoole同步请求如何使用
    本篇内容主要讲解“Swoole同步请求如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Swoole同步请求如何使用”吧!一、什么是Swoole同步请求Swoole是一种针对PHP语言的网络...
    99+
    2023-07-05
  • 如何在Go中进行Post请求
    近年来,Go语言(也称为Golang)在企业级开发中变得越来越流行。它追求高效率、高并发和高性能,使它成为Web应用程序和API开发的首选语言之一。本文将深入了解如何在Go中进行Post请求,让我们一起来看看吧。Go语言提供了一个标准包“n...
    99+
    2023-05-14
  • ajax如何将异步请求改为同步
    这篇文章主要讲解了“ajax如何将异步请求改为同步”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ajax如何将异步请求改为同步”吧! ...
    99+
    2024-04-02
  • React中如何使用axios发送请求
    小编给大家分享一下React中如何使用axios发送请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!React中安装并引入axios依赖在React项目中使用a...
    99+
    2023-06-20
  • 在Golang中如何进行网络请求
    Golang是一种高效的编程语言,被广泛应用于Web应用程序和网络服务开发。在网络服务中,请求是一个非常重要的部分。本文将介绍Golang中如何进行网络请求,包括GET请求和POST请求。GET请求GET请求是最常用的网络请求方法之一。它用...
    99+
    2023-05-14
  • 如何在Vue项目中使用axios请求
    目录1、安装2、没有封装存在的问题3、创建文件4、请求地址配置5、axios 配置,设置请求头及响应码处理6、使用在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axio...
    99+
    2024-04-02
  • 如何使用Golang进行API请求
    Golang是一门现代化的编程语言,而且它在后端语言领域中越来越受欢迎。它的优点包括高效的并发处理、内存安全性和垃圾收集机制。在本文中,我们将探讨如何使用Golang进行API请求。首先,我们需要从安装Golang开始。Golang便携式安...
    99+
    2023-05-14
  • Node.js Async/Await与Promise的异同:如何选择合适的异步编程方式?
    作为一门事件驱动的语言,Node.js 天生就支持异步编程。异步编程可以提高程序的并发能力,从而提高程序的性能。在 Node.js 中,有两种流行的异步编程方式:Async/Await 和 Promise。 Async/Await 是 ...
    99+
    2024-02-27
    Node.js、异步编程、Async/Await、Promise
  • 如何在 PHP 中使用 JavaScript 进行 HTTP 请求?
    在现代 Web 开发中,经常需要使用 JavaScript 发送 HTTP 请求来获取数据。在某些情况下,需要在 PHP 中执行此操作。本文将探讨如何在 PHP 中使用 JavaScript 发送 HTTP 请求。 一、使用 XMLHtt...
    99+
    2023-11-07
    http apache javascript
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作