Vue+Axios的方法异步回调顺序问题

这篇具有很好参考价值的文章主要介绍了Vue+Axios的方法异步回调顺序问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、问题阐述
有的时候我们需要控制异步函数的执行顺序,比如a方法中如果要用到异步函数b方法的请求结果,就需要进行顺序控制,否则a函数先执行就会导致找不到数据直接报错。
二、方法

1.异步控制

1.1.async,await等做异步控制

1.2修改函数放置位置达到异步控制效果(我遇到的情况无效,但是确实是一个方法)

2.通过Vue watch监视数据变化,从而达到异步控制的效果

3.事件驱动编程。

三、方法示例

1.异步控制

  async mounted() {
     await this.b();
     this.a();
   }

   async b() {
     const response = await axios.get('your-api-url');
     this.someData = response.data;
   }

2.watch

  watch: {
    dataOfANeed: {//监视a函数需要的数据
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        this.a();
      },
    },
  },
3.事件驱动编程【未验证,仅作参考】
mounted() {
     this.b();
   },
   methods: {
     async b() {
       const response = await axios.get('your-api-url');
       this.someData = response.data;
       this.$nextTick(() => {
         this.$emit('data-loaded');
       });
     },
     a() {
       this.$on('data-loaded', () => {
         // 在这里可以安全地访问 this.someData,因为它已经被 b 方法异步更新了
       });
     }
   }

四、实例

订单实例中,我们需要设置订单的基础信息(setOrderBasic()),其中包含下单目标的基本信息(queryByPage()),运行中我们通过Vue DevTools等前端开发工具的帮助,完成整个方法执行顺序的控制。

1.赋值时setOrderBasic()由于其内部有值是queryByPage()方法执行完成后才有的,而由于queryByPage()是异步回调,所以要做异步控制

Vue+Axios的方法异步回调顺序问题【方法1.2】

但是无用

Vue+Axios的方法异步回调顺序问题

2.通过直接执行setOrderBasic()方法可以看到

Vue+Axios的方法异步回调顺序问题

 

除了需要queryByPage的属性均赋值成功,而没有的属性值则为undefined,可见,虽然无值但仍做了赋值操作(undefined)

3.由此改用watch监视lmInfo

Vue+Axios的方法异步回调顺序问题【方法2】

当lmInfo有值(发生改变)时,则触发setOrderBasic方法,至此成功

Vue+Axios的方法异步回调顺序问题文章来源地址https://www.toymoban.com/news/detail-837822.html

到了这里,关于Vue+Axios的方法异步回调顺序问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue全家桶(二):Vue中的axios异步通信

    Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据

    2024年02月09日
    浏览(60)
  • vue js 回调函数 异步处理 为什么要 let that = this

    1 异步就是开个事务( 只有主线程 等主线程空闲 ),用that 值 做处理,然后返回处理结果,而that的值是开启 事务那一刻 的this的值.而在主线程处理的时候,this的一直在变化, that的值保留在那一刻 ps 或是将本obj 传递给其他的obj使用处理 ps 开启新事务或开启新子线程都是 在新的ob

    2024年02月11日
    浏览(54)
  • 巧用回调函数解决微信小程序与后台数据交互出现的异步问题

            微信小程序端需要发送一个包含文字与图片的表单数据给后端,我一开始的思路是 先 上传图片得到临时的URL, 后 执行POST请求将表单数据发送给后端,但后端只能获取到文字,而图片URL却始终获取不到。         注意看我上面的思路, 一先一后 ,无形中将两

    2024年02月16日
    浏览(42)
  • vue中的异步请求Axios(个人学习笔记五)

    先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。 ①传统的Ajax请求是基于XMLHttpRequest(XHR)对象。可以直接使用。但是使用起来配置较为麻烦,实际开发中使用非常少,在MVC时代通常使用的是JQuery-Ajax。相对于传统的Ajax现在使用更多的是Fe

    2024年02月15日
    浏览(32)
  • Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

    如果想做bilibili那样的边看视频边评论怎么搞?; 之前用jsp的方式,是无法实现这个需求的,因为每次评论后提交了评论,会把整个页面全部刷新,导致视频也回到未播放的初始状态,如下所示: 代码为: 这是因为,在每次浏览器请求后,只能等待服务器的响应,即这种方

    2024年02月09日
    浏览(59)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(43)
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南

      在Vue中使用JSON文件有多种方式,包括使用 fetch 方法加载JSON文件、使用 axios 库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码: 创建一个 JSON 文件,例如  data.json : 在Vue组件中使用  fetch  方法加载 JSON 文件: 安装  axios  库: 在Vue组件中使

    2024年02月19日
    浏览(42)
  • IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Vue 是一套用于构建 用户界面 的渐进式 JavaScript 框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注 视图层 ,不仅易于上手,还便于与第三方库或既有项目 整合 。另一方面,当

    2024年04月13日
    浏览(137)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(68)
  • ChatGPT:概述Vue.js中data函数初始化和created钩子函数调用的顺序和问题解决方法

    我将输入一段Vue代码,请你记住: ChatGPT: 你提供的代码是一个Vue.js组件中的 data 和 created 部分。这部分代码包含了组件的数据和生命周期钩子函数。 在 data 中,你定义了一些数据属性,包括查询信息、分页信息、总记录数、表格数据以及一些表单相关的数据和控制属性。

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包