axios.all中的注意事项

如下的请求：

methods:{getData(){axios.all([axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"})),axios.post('/xxxxxxxxxx', qs.stringify({"xxxxxxxxxx": "xxxxxxxxxx","xxxxxxxxxx": "xxxxxxxxxx"}))  ]).then(axios.spread(function (v1, v2, v3, v4, v5, v6, v7, v8){tempArray.length = 0;tempArray.push(v1.xxxxxxxxxx);tempArray.push(v2.xxxxxxxxxx);............}))this.xxxxx= tempArray;}

这里要注意的地方！在then后不能采用this.vue中的变量，不然会报这样的错误！

vue cli Cannot read property 'xxxx' of null

所以得用一个JavaScript变量去接收，但是这个接收也有个坑，再下面将会说明！

为什么要采用全局的JavaScript变量给vue变量

代码和上面的一样！增加如下的声明：

<script>import axios from 'axios'import qs from 'Qs'let tempArray = [];export default {components:{..........},data(){return{dynamicListVue: []}},created() {this.getData();},mounted(){this.getData();this.timer = setInterval(this.getData, 5000)},methods:{getData(){....}},beforeDestroy() {clearInterval(this.timer)}}
</script>

这里最好是在这个页面的全局下写一个let tempArray = [];

如果在局部写，那么当刷新得到的数据，将会闪烁

闪烁

前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方相关推荐

前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发.多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们.这通常被称作微前端,但并不仅限于此. 我们分为本地模块 ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...

前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方

axios.all中的注意事项

为什么要采用全局的JavaScript变量给vue变量

前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方相关推荐

最新文章

热门文章