在vue 中 axios 请求要怎么同步执行?_vue axios 同步方式-程序员宅基地

技术标签: vue  前端  axios  异步请求  vue.js  javascript  

前言:axios在Vue项目中可以用来向后台发送请求(调接口API),获取响应信息的一个方法。
axios介绍
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
首先需要知道:axios不是一种新的技术。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

axios 本来就是设计成异步执行的:
同样的,requestjs,fetch 也都是。但他们已经提供了async/awati的语法支持。这是目前最简介的写法。前端由于交互的需求,数据的请求都是异步的,这样确保页面交互不受数据请求的影响。
不过如果你执意要用同步执行(后端转前端水土不服?),你可以重写axios 的get 或者post 方法,重新基于xmlhttprequest封装,在send 之前将xmlhttprequest 的Async 属性设置成 false。

原来的数据请求是类似这样写的。

get(url){
    
   
   return new Promise((resolve,jet)=>{
    
     let xmlhttp=new XMLHttpRequest();
     xmlhttp.open("GET",url,true);
     xmlhttp.onreadystatechange = resolve;
     xmlhttp.send(null);
   })
   
}

这种写法就是目前async/await 的封装,使用的时候就是(外围用async函数包装)

let response = await get(xxxxxx);

换种封装方法:区别在于open函数的第三个参数

get(url){
    
   
  
     let xmlhttp=new XMLHttpRequest();
     xmlhttp.open("GET",url,false);
     xmlhttp.send(null);
     return xmlhttp.responseText
   
}

使用的时候:(外围不用async函数包装)

let response = get(xxxxxx);

但这个过程如果持续时间太长,整个页面就卡住了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38290010/article/details/125905480

智能推荐

响应者链条-程序员宅基地

文章浏览阅读1.1k次。一,响应者链条:由很多响应者链接在一起组合起来的一个链条称之为响应者链条响应者:继承UIResponder的对象称之为响应者对象 2.处理原则默认做法是将事件顺着响应者链条向上传递,将事件交给上一个响应者进行处理 如何判断当前响应者的上一个响应者是谁? (1)判断当前是否是控制器的View, 如果是控制器的View上一个响应者就是控制器 (2)如果当前不是控制器_响应者链条

互斥量属性-程序员宅基地

文章浏览阅读2.5k次。转载出处:http://blog.csdn.net/ctthuangcheng/article/details/9357133 互斥量具有一些属性,通过修改这些属性可以控制锁的一些行为。缺省的互斥锁属性及其值如下:pshared: PTHREAD_PROCESS_PRIVATEtype: PTHREAD_MUTEX_DEFAUL_互斥量属性

Redis中的乐观锁和悲观锁_redis乐观和悲观锁区别-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏5次。一、定义:悲观锁(Pessimistic Lock):  顾名思义,就是很悲观。每次获取数据的时候,都会担心数据被修改,所以每次获取数据的时候都会进行加锁,确保在自己使用的过程中数据不会被别人修改,使用完成后进行数据解锁。由于数据进行加锁,期间对该数据进行读写的其他线程都会进行等待。传统的关系型数据库里边就用到了很多这种锁机制,比如行锁、表锁、读锁、写锁等。都是在操作之前先上锁让别人无法操作该数据。乐观锁(Optimistic Lock):  顾名思义,就是很乐观。每次获取数据的时候,都不会担心数据_redis乐观和悲观锁区别

使用Azure Kinect Body骨骼构造SMPL三维人体模型_smpl模型-程序员宅基地

文章浏览阅读1w次,点赞23次,收藏94次。1.SMPL模型简介SMPL是通过参数控制的人体模型,可控制的参数为Pose和Shape。总共有24个关节点,模型及关节索引如下图。每个关节通过一个旋转向量控制,如下图为手动控制关节点4绕Z轴旋转90度、关节点19绕Y轴旋转90度的结果。旋转控制的是如果再绕关节点17旋转-90度,则..._smpl模型

服务器网卡用一段时间后就自动断网,高手教你解决win10网络频繁自动断开的问题...-程序员宅基地

文章浏览阅读6.1k次。现在使用win10系统的用户越来越多了,上网前第一件事情就是连接网络。在使用win10系统过程中,网络出现频繁断开的情况,每回都要重新手动连接网络才能继续上网。有什么办法解决?接下去小编告诉大家一招具体解决方法。具体方法如下:1、网络频繁断开时,一般是开机2小时之后。那么说明这种情况和开机的时间是有关系的所以重启电脑是我想到的最简单的方法。2、不是所有人都可以接受开机2小时重启一次电脑的。解决方法..._服务器上win10虚拟机 每隔一段时间断开链接

Spring自动装配之byName和byType【Spring入门】_spring byname 和 bytepy 都会调用setter-程序员宅基地

文章浏览阅读8.5k次,点赞3次,收藏11次。在使用Spring框架时,有些bean中有个成员变量是另一个bean。举个实际的例子,比如说CDPlayer类(CD播放器类)中有一个属性是CD(接口),代表着CDPlayer可以放各种CD,可以实例化为Mayday(五月天的歌)。原来我们需要在配置CDPlayer这个bean的时候添加,手动装配。代码如下: _spring byname 和 bytepy 都会调用setter

随便推点

机器翻译与人工智能研究报告(2018年第五期)_机器翻译与人工翻译的研究报告-程序员宅基地

文章浏览阅读2k次。机器翻译已经发展了70年,近期谷歌、Facebook 等公司将神经网络应用在机器翻译中,更是将机器翻译的速度和质量提升了不止一个档次。 而机器翻译领域所取得的这些成就,离不开无数专家学者前赴后继的潜心研究。机器翻译已经发展了70年,近期谷歌、Facebook 等公司将神经网络应用在机器翻译中,更是将机器翻译的速度和质量提升了不止一个档次。而机器翻译领域所取得的这些成就,离不开无数专家..._机器翻译与人工翻译的研究报告

SPOJ-COT-Count on a tree-程序员宅基地

文章浏览阅读343次。COT-Count on a treeYou are given a tree with N nodes.The tree nodes are numbered from 1 to N.Each node has an integer weight.We will ask you to perform the following operation:u v k : ask for the kth m_spoj-cot-count on a tree

Kubernetes编排Kafka Docker镜像l的方式搭建集群_--override zookeeper.connect=zk-cs:2181-程序员宅基地

文章浏览阅读3.5k次,点赞2次,收藏8次。本文基于已经安装了k8s和docker的情况下进行的k8s 编排kafk容器可以有statefulset和deployment两种方式。分别是有状态和无状态的,具体区别可以百度一下,这里只介绍集群搭建的方法。需要先准备若干yml配置文件(文件名自己定义,不固定),上传到linux机器的任意文件夹里(比如home下面自己创建一个k8skafka文件夹)第一种:statefulset集群编..._--override zookeeper.connect=zk-cs:2181

Verify the connector's configuration, identify and stop any process that's listening on port 7060-程序员宅基地

文章浏览阅读2.1k次。Verify the connector’s configuration, identify and stop any process that’s listening onport 7060, or configure this application to listen on another port.报错解决方法_verify the connector's configuration, identify and stop any process that's l

sqlserver里面添加约束条件_增加一个约束条件,约束名字是什么-程序员宅基地

文章浏览阅读2.3w次,点赞16次,收藏62次。1.主键约束:格式为:alter table 表格名称 add constraint 约束名称 增加的约束类型 (列名)例子:alter table emp add constraint ppp primary key (id); 2.check约束:就是给一列的数据进行了限制格式:alter table 表名称 add constr_增加一个约束条件,约束名字是什么

Linux内核定时器timer_list的使用-程序员宅基地

文章浏览阅读4.5k次,点赞5次,收藏21次。Linux内核定时器timer_list的使用内核定时器:定时器(优势也称为动态地上那个时期或内核定时器)是管理内核流逝时间放的基础。内核经常需要推后执行某些代码,如中断的下半部机制就是为了将工作放到 以后执行。定时器的使用很简单,你只需要执行一些初始化工作,设置一个超时时间,指定超时发生后的执行函数,然后激活定时器就可以了。指定的函数将在定时器到期时自动执行,注意定时器并周期运行..._timer_list

推荐文章

热门文章

相关标签