今天遇到这样一个问题,前端会同时弹出成功和失败的两个提示框,由于不是本人操作,也没有怀疑是前端代码的问题,就索性根据后端的日志作为分析依据,开始个人以为是后端接口上班了两次结果,一个是成功,另外一个是失败;但是经过对后端日志详细分析后发现后端的运作流程一切正常,没有发现异常的流程,这下就犯难了,又开始怀疑是不是快速操作导致的,可能是网络延迟导致前一个的结果还没送达,而第二次的结果就送达了,若是这样解释的话,也是可以理解的。后来又听说这现象是必现的,那总不可能都是网络原因吧。于是只好检查前端代码了,由于这些代码是其他同事很早之前写的,也没有怀疑会有逻辑和语法错误,一边梳理一遍自测,正好遇到同时弹出成功和失败的两个提示框,按下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. Redis的“假事务”与分布式锁

    关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...

  2. bootstrap的自适应 和细节点

    bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...

  3. File类和枚举

    java.io.File类:文件和目录路径名的抽象表示形式 File类常见构造方法: File(String pathname):通过将给定路径名字符串转换为抽象路径名来创建一个新 File 实例. ...

  4. Linux运维---1.磁盘相关知识

    一 磁盘物理结构 (1) 盘片:硬盘的盘体由多个盘片叠在一起构成. 在硬盘出厂时,由硬盘生产商完成了低级格式化(物理格式化),作用是将空白的盘片(Platter)划分为一个个同圆心.不同半径的磁道(T ...

  5. Linux运维--实践-Rally

    1.rally简介 OpenStack Rally 是一个自动化测试工具,社区希望通过 Rally 来解答 "How does OpenStack work at scale?(如何规模化运 ...

  6. TFT液晶显示屏之绘图板应用

    应用范例: 使用 TOPWAY Smart LCD (HMT043FC-1C) 绘图板应用 第一步建立工程 ① 开TOPWAY TML Graphic Editor 2017 V1.04软件, 点击菜 ...

  7. Mumbai:1 Vulnhub Walkthrough

    靶机地址: https://www.vulnhub.com/entry/mumbai-1,372/ 主机探测: 主机端口扫描: FTP 下载Note文件 TODO: Move these multip ...

  8. Android9.0 Settings 修改踩坑记录

    问题现象 上图展示的很清楚,当系统语言为中文时,PreferenceScreen 中的折叠项 summary 描述重复显示的 bug,系统语言为英文时正常. 修改历程 先搜索 当前显示了 字符串,还真 ...

  9. SQLyog12.08详细安装教程

    SQLyog安装教程 一.软件下载 为了更好的学习,我们需要可视化界面,而不仅仅是通过命令行黑窗口管理数据库.SQLyog 就是一个快速而简洁的图形化管理MYSQL数据库的工具. SQLyog12.0 ...

  10. mysql实现远程登录

    CentOS7上安装mysql后,想要实现mysql远程登录. 主要解决二个问题:(1)为mysql用户授予远程登录权限(改表法或授权法):(2)防火墙开放3306端口. (一)授予登录权限 mysq ...