axios同步和异步请求数据

axios默认是异步请求数据的，如果需要同步获取数据的话，需要进行设置。

下面的代码默认异步请求数据：

<template><div><el-tabs @tab-click="tabEvent"><el-tab-pane name="tab1">Tab1</el-tab-pane><el-tab-pane name="tab2">Tab2</el-tab-pane><el-tab-pane name="tab3">Tab3</el-tab-pane></el-tabs><el-table :data="tableData"><el-table-column type="index" label="序号"></el-table-column><el-table-column prop="name" label="名称"></el-table-column><el-table-column prop="type" label="类别"></el-table-column><el-table-column prop="price" label="价格"></el-table-column></el-table></div>
</template><script>
export default {name: "asyncAndAwait",data() {return {product_category: "",tableData: []};},methods: {tabEvent: function(tab, event) {var name = tab.name;if (name == "tab2") {this.getProductCategory();this.getProducts(this.product_category);}},//请求接口获取product_categorygetProductCategory: function() {var that = this;axios.get("xx/xxx/xxx").then(function(response) {var data = response.data;if (data.status == 0) {that.product_category = data.data[0].product_category;}}).catch(function(error) {console.log(error);});},//根据请求到的product_category，获取具体数据getProducts: function(product_category) {var that = this;axios.post("xx/xxx/xxx?product_category=" + product_category).then(function(response) {var data = response.data;if (data.status == 0) {that.tableData = data.tableData;}}).catch(function(error) {console.log(error);});}}
};
</script>

在以上代码中，getProducts方法是需要根据getProductCategory方法返回的product_category获取数据的,但是由于两个方法是异步的，所以获取到的products的数据不是获取到的product_category类型的数据，因此需要将以上两个方法修改为同步，如下：

<template><div><el-tabs @tab-click="tabEvent"><el-tab-pane name="tab1">Tab1</el-tab-pane><el-tab-pane name="tab2">Tab2</el-tab-pane><el-tab-pane name="tab3">Tab3</el-tab-pane></el-tabs><el-table :data="tableData"><el-table-column type="index" label="序号"></el-table-column><el-table-column prop="name" label="名称"></el-table-column><el-table-column prop="type" label="类别"></el-table-column><el-table-column prop="price" label="价格"></el-table-column></el-table></div>
</template><script>
export default {name: "asyncAndAwait",data() {return {product_category: "",tableData: []};},methods: {//添加async和await方法变为同步tabEvent: async function(tab, event) {var name = tab.name;if (name == "tab2") {await this.getProductCategory();this.getProducts(this.product_category);}},//请求接口获取product_category，添加async和await方法变为同步getProductCategory: async function() {var that = this;await axios.get("xx/xxx/xxx").then(function(response) {var data = response.data;if (data.status == 0) {that.product_category = data.data[0].product_category;}}).catch(function(error) {console.log(error);});},//根据请求到的product_category，获取具体数据getProducts: function(product_category) {var that = this;axios.post("xx/xxx/xxx?product_category=" + product_category).then(function(response) {var data = response.data;if (data.status == 0) {that.tableData = data.tableData;}}).catch(function(error) {console.log(error);});}}
};
</script>

在tabEvent和getProductCategory方法中添加上async和await即可使getProductCategory获取到product_category之后再运行getProducts，获取到的数据就是product_category类型的数据

axios同步和异步请求数据相关推荐

javascript --- [代码优化]将复杂的函数分解写异步请求数据的同步写法
说明今天优化项目结构,发现有如下一个函数 const drawMqiPie = async (index) => {// 请求的参数let params = {lineNo: lineNo,d ...
json请求 post vue_Spring Boot+Vueaxios异步请求数据的12种操作（上篇）
Java大联盟致力于最高效的Java学习关注 Spring Boot + Vue 前后端分离最核心的操作就是通过异步请求完成数据同步,这其中又可以分为很多种不同的情况,比如是 GET 请求还是 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
iOS网络--同步，异步下载数据
一. 这一节我们来学习几种下载数据的方式,目的在于学习同步,异步下载数据的知识. 二. 1.直接同步下载数据 //直接下载同步下载阻塞主线程 NSURL * url = [NSURL URLWit ...
AJAX怎么实现同步请求？Ajax同步和异步请求有什么区别以及使用场景有哪些？
一.AJAX怎么实现同步请求? ajax请求我们分为同步请求和异步请求,但是默认的都是异步请求,那么,当我们想用ajax同步请求时,我们该如何去实现这个同步请求呢?接下来的这篇文章就来给大家介绍一下关 ...
OkHttpClient源码分析（一）—— 同步、异步请求分析和Dispatcher的任务调度
OkHttpClient同步请求的执行流程和源码分析同步请求示例 OkHttpClient okHttpClient = new OkHttpClient.Builder().readTimeout ...
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
C# OPC DA 协议同步及异步读取数据，支持局域网访问其他OPC server
C# OPC DA 协议同步及异步读取数据,支持局域网访问其他OPC server

axios同步和异步请求数据

axios同步和异步请求数据相关推荐

最新文章

热门文章