今天遇到这样一个问题，前端会同时弹出成功和失败的两个提示框，由于不是本人操作，也没有怀疑是前端代码的问题，就索性根据后端的日志作为分析依据，开始个人以为是后端接口上班了两次结果，一个是成功，另外一个是失败；但是经过对后端日志详细分析后发现后端的运作流程一切正常，没有发现异常的流程，这下就犯难了，又开始怀疑是不是快速操作导致的，可能是网络延迟导致前一个的结果还没送达，而第二次的结果就送达了，若是这样解释的话，也是可以理解的。后来又听说这现象是必现的，那总不可能都是网络原因吧。于是只好检查前端代码了，由于这些代码是其他同事很早之前写的，也没有怀疑会有逻辑和语法错误，一边梳理一遍自测，正好遇到同时弹出成功和失败的两个提示框，按下F12，一看console内容，提示有个变量是未定义的，一看代码原来是语法错误，在axios的then中使用了this对象，用this引用属性，导致抛出异常，就这么一个低级错误，隐藏这么深，不起眼，浪费我耗时这么久才发现，通过变量替换就可以了，用self替换this即可。

小结:个人觉得在函数体的开头最好定义let self=this，在函数体的其它地方统一使用self访问属性和方法，避免低级错误的发生。

20191108闪

JS中axios使用注意点的更多相关文章

  1. vue.js中axios的封装

    基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...

  2. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

  3. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  4. Vue.js中前端知识点总结笔记

    1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...

  5. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  6. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  7. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

  8. 前台框架vue.js中怎样嵌入 Echarts 组件？

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

  9. 「Vue」vue cli3中axios的基本用法

    1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...

随机推荐

  1. 9种分布式ID生成之 美团（Leaf）实战

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...

  2. 解决“此Flash Player与您的地区不相容”

    1.进入C:\Windows\System32\drivers\etc目录,将hosts文件拷贝到桌面,然后用文本编辑器,比如记事本,打开,在最后一行添加: 127.0.0.1 geo2.adobe. ...

  3. C# WPF从RIOT API获取数据(RIOT代表作品《英雄联盟》)

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF从RIOT API获取数据(RIOT代表作品<英雄联盟>) 阅读导航 ...

  4. Java Web 笔记（3）

    8.JSP 8.1.什么是JSP Java Server Pages : Java服务器端页面,也和Servlet一样,用于动态Web技术! 最大的特点: 写JSP就像在写HTML 区别: HTML只 ...

  5. js Dom为页面中的元素绑定键盘或鼠标事件

    html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...

  6. 优酷爱奇艺视频转换为MP4格式工具

    本君今天分享两个免费的视频格式转换工具,分别是爱奇艺和优酷的(腾讯的有点复杂,等整理完再分享).教程都是一步步亲手操作的,每一步都有配图.希望各位老板多转发分享,谢谢! 一爱奇艺QSV转MP4格式 解 ...

  7. Q&A in 2018 - Q1

    Those questions Simply write down questions that ever frustrated me a little: How to convert unix ti ...

  8. java-局部变量，成员变量区别

    1. 内存中的位置 成员变量: 堆内存 局部变量: 栈内存 2. 生命周期 成员变量:随着对象的创建而存在,随着对象的消失而消失 局部变量:随着方法的调用而存在,随着方法调用完毕而消失 3. 注意事项 ...

  9. 对象浅拷贝Object.assign

    const target = { a: { b: { c: { d: 1 } }, e: 5, f: 6, h: 10 } } const source = { a: { b: { c: { d: 1 ...

  10. @RequestBody 和 @RequestParam(“test”) 的区别与联系

    @RequestBody @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的):GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用 ...