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

 更新时间:2022年09月08日 10:26:09   作者:艾欢欢  
这篇文章主要介绍了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)
    })

打印结果:

代码看着就很舒服

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

相关文章

  • el-select 下拉框多选实现全选的实现

    el-select 下拉框多选实现全选的实现

    这篇文章主要介绍了el-select 下拉框多选实现全选的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 在vue和element-ui的table中实现分页复选功能

    在vue和element-ui的table中实现分页复选功能

    这篇文章主要介绍了在vue和element-ui的table中实现分页复选功能,本文代码结合图文的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vue Prop属性功能与用法实例详解

    Vue Prop属性功能与用法实例详解

    这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • vue项目出现ERESOLVE could not resolve问题及解决

    vue项目出现ERESOLVE could not resolve问题及解决

    这篇文章主要介绍了vue项目出现ERESOLVE could not resolve问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 优雅的处理vue项目异常实战记录

    优雅的处理vue项目异常实战记录

    这篇文章主要给大家介绍了关于如何优雅的处理vue项目异常的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Vue封装的标准漏斗图教程

    Vue封装的标准漏斗图教程

    文章展示了基于Vue封装的标准漏斗图的代码,包括权重算法、滚轮监听和点击示例功能,旨在提供实用的图表展示技巧
    2025-02-02
  • 解决vue addRoutes不生效问题

    解决vue addRoutes不生效问题

    这篇文章主要介绍了解决vue addRoutes不生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3中template使用ref无需.value原因解析

    vue3中template使用ref无需.value原因解析

    vue3的template中使用ref变量无需使用.value,还可以在事件处理器中进行赋值操作时,无需使用.value就可以直接修改ref变量的值,这篇文章主要介绍了原来vue3中template使用ref无需.value是因为这个,需要的朋友可以参考下
    2024-06-06
  • 在vue-cli项目中如何使用swiper

    在vue-cli项目中如何使用swiper

    这篇文章主要介绍了在vue-cli项目中如何使用swiper问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论