情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

axios实现同步请求,实现jquery async:false效果

4587人阅读 2023/3/28 15:58 总访问:1183651 评论:0 收藏:0 手机
分类: 前端

如何实现ajax请求的同步?

通过jquery发送,将async属性设置为false,这样就会发送同步请求

在axios中,所有的请求都是异步发送的。所以单独用axios是实现不了同步的,需要结合async与await关键字使用。

  1. var data = {}
  2. axios.get("./data1.json").then(res => data = res.data)
  3. console.log(data)

如果我们的代码是这个顺序,则data还是个空对象,是获取不到的。

async 与 await

async是修饰函数的,async修饰的函数的返回值是promise对象,这个promise对象的状态与值具体要看被修饰的函数的返回值,如果被修饰的函数的返回值为非promise对象,那该函数返回的promise对象的状态为成功,成功的值就是返回值,如果被修饰的函数返回的是一个promise对象,则的返回的promise对象的值与状态由函数return后的promise对象的状态和值决定。

await 必须用在async函数中,await 后修饰的是一个promise对象,await返回的值,就是promise对象成功的值。

  1. async function init(){
  2. var data = {}
  3. var res = await axios.get("./data1.json")
  4. data = res.data
  5. console.log(data)
  6. }
  7. init()

这样axios请求就成了同步的,axios请求本身返回的就是一个promise对象,await语句可以将promise对象成功的值返回出去,也就是这里的res就是axios请求成功的值。

这样就可以同步获取结果了。

在vue中可以这样用

  1. new Vue({
  2. methods:{
  3. async listData(){
  4. var res = await axios.post(xxxx)
  5. console.log(res)
  6. }
  7. }
  8. })

原文:http://blog.miequan.com/archives/1592


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue使用axios调用接口解决跨域。vue调用api接口。vue请求封装

一.先下载axios依赖npminstallaxios二.在需要的地方引入importaxiosfrom'axios'三.环境准备好了之后就可以使用axio...

vue使用axios报404

404错误在去配置一个pathRewrite,也就是路径重写,就可以解决这个404的问题了

.net core web api get请求无法接收 axios 传多对象参数

请求的结构会发现,后面的参数无法序列号,这不是我们想要的效果=》后面的param 参数没有接收到值,这下完蛋了是否有一种方...

vue3使用axios的请求封装与跨域配置

以前vue2当中的详细的请求封装以及跨域的可以参考:https://www.tnblog.net/aojiancc2/article/details/4751其实逻辑基本都...

axios发送一个Post请求把json参数使用Form Data的形式进行传递

在 Vue 3 中使用 Axios 发送一个 POST 请求,并且以 FormData 的形式传递参数,你可以使用 FormData 对象来构建表单数据。...

axios发送一个Post请求发送一个类似postman中的x-www-form-urlencoded 格式参数

在 Postman 中,x-www-form-urlencoded 是一种编码格式,它允许你将表单数据以键值对的形式发送到服务器,类似于 HTML 表单...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框据输入动态加载数据 jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页.net core分部页

.net分部页的三种方式第一种:@Html.Partial("_分部页")第二种:@{ Html.RenderPartial("分部页");}...

css中单位pxemrem和vh/vw的理解

>px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式iis设置mime类型iis配置支持的类型

webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现无视文件大小上传以及datatables基本用法

首先明白js是客户带执行代码,c#是服务器上执行代码。本地文件需要用到js处理,服务器端接受c#代码处理1.HTML页面,文件信...

如何使用图标像使用文字一样使用文本图标的方法

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标;注意:每个类型的图标会大小不...

使用七牛云的cdn服务提高图片的加载速度

CDN介绍CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,...

通俗易懂什么是.NET?什么是.NET Framework?什么是.NET Core?

朋友圈@蓝羽 看到一篇文章写的太详细太通俗了,搬过来细细看完,保证你对.NET有个新的认识理解原文地址:https://www.cnblo...