axios请求是一个异步的请求,简单来讲就是在做其他事情的时候可以把这个先放一边等其他的事情做完后再来做这件事件。

我之前这样调用了一个方法:

mounted() {
this.first()
this.next();
}
first(){
this.next();
}
next(){
this.Array = [];
axios.post(url).then((res)=>{
this.Array.push(res)
})
}

可以看到我是调用了两次的next事件,我在next最开始的部分对数组进行了初始化,按照我的预想是这个数组里面始终只有一个接口返回的res数据在里面,但是执行后发现数组里面有两个res。

后来对next和axios打印后发现,first的时候执行了初始化数组,但是并没有立即执行axios,把axios放一边,然后向下执行遇到next,于是再次执行初始化,执行完成后发现没有了,所以就找到axios,因为两次调用了axios所以push了两个res到数组里面去。

把代码改为这样,就解决了:

mounted() {
this.first()
this.next();
}
first(){
this.next();
}
next(){
axios.post(url).then((res)=>{
this.Array = [];
this.Array.push(res)
})
}

严格来讲这个并不是axios请求的锅,是我本身对同步,异步执行的顺序存在理解上的问题,这个锅要自己背。

而最开始我对于同步异步的简单概述其实也是不标准的,对于异步,同步,阻塞,非阻塞还请参考其他大神的详细解释。

记录一次axios请求造成的数组初始化失败的更多相关文章

  1. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  2. nodejs-5.2 axios请求

    1.npm官方文档:https://www.npmjs.com/package/axios 2.axios:用于 浏览器 和 node.js的基于Promise的HTTP客户端 请求 特征 从浏览器制 ...

  3. axios [æk'si:əʊs] 及 axios 请求配置

    特征 比Jquery轻量,但处理请求不多的时候,可以使用 基于Promise语法标准 支持nodejs 自动转换JSON数据 用法 get // Make a request for a user w ...

  4. Axios 请求配置参数详解

    axios API 可以通过向 axios 传递相关配置来创建请求 axios(config)   // 发送 POST 请求   axios({   method: 'post',   url: ' ...

  5. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  6. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  7. 利用LRU策略实现Axios请求缓存

    业务场景 前一段时间刚做完一个项目,先说一下业务场景,有别于其他的前端项目,这次的项目是直接调用第三方服务的接口,而我们的服务端只做鉴权和透传,第三方为了灵活,把接口拆的很零散,所以这个项目就像扔给你 ...

  8. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  9. nginx记录响应与POST请求日志

    生产环境中的某些api出现故障,但是问题无法重现,但是又很想解决掉问题以及我们新项目上线,需要跟踪请求与响应的信息,可以预先找到一些bug,减少大面积的损失. 安装nginx与ngx_lua 响应日志 ...

随机推荐

  1. 【Monkey】Monkey基础概念

    1.什么是Monkey? 发送伪随机用户事件的命令 2.Monkey在哪? 在手机系统里 3.什么是ADB? 4.MonkeyScript 一组可以被Monkey识别的命令集合,可以完成重复固定的操作 ...

  2. 封装一个redis操作类来操作hash格式

    最近项目要用redis,依然是基于tp3.2. 发现thinkphp3.2自带的缓存类并不好使用,就自己封装了一个 目前只支持hash格式,其他数据类型的操作后面用到的时候再补充 <?php / ...

  3. windows下Go升级及GoLand的安装激活

    之前在qor/China上问golang项目包有没有一键安装,有位朋友给出了回复: 于是,尝试了下升级Go,目前版本是1.10.1,现升级为为1.12.2.步骤如下: 一.下载安装包 下载地址:htt ...

  4. 关于input

    form表单的使用: 1.iuput:type:类型有很多常用的: text:输入的内容为文本格式(内容可见) password:输入的内容为......(内容不可见) radio:显示为单选框(框为 ...

  5. python之路-----前端之html协议一

    一.概述 1.1 什么是html语句? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 浏览器按顺 ...

  6. ES(Elasticsearch)

    基本概念 Elasticsearch是一个实时分布式搜索和分析引擎 支持: 全文搜索 结构化搜索 分析 可以这样进行描述: 分布式的实时文件存储,每个字段都被索引并可被搜索 分布式的实时分析搜索引擎 ...

  7. DAY1 练习

    要求:⽤户登陆(三次输错机会)且每次输错误时显示剩余错误次数(提示:使⽤字符串格式化), 如果三次用完了之后 问是否再试试 再给三次机会 如果不想试了说没有机会了. list = [{'usernam ...

  8. .net回复图片

    using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web. ...

  9. react-native 安装的时候遇到的问题

    JAVA  JDK必须要版本8以上(卡了我好大一会,不要忘了环境变量换成8的路径) 这个报错是因为我的版本没升级? 总之解决方法如下 给升级下就好啦~ 然后出现个这么个问题,是因为我用的测试手机是红米 ...

  10. 七月在线爬虫班学习笔记(二)——Python基本语法及面向对象

    第二课主要内容如下: 代码格式 基本语法 关键字 循环判断 函数 容器 面向对象 文件读写 多线程 错误处理 代码格式 syntax基本语法 a = 1234 print(a) a = 'abcd' ...