JS中axios使用注意点
今天遇到这样一个问题,前端会同时弹出成功和失败的两个提示框,由于不是本人操作,也没有怀疑是前端代码的问题,就索性根据后端的日志作为分析依据,开始个人以为是后端接口上班了两次结果,一个是成功,另外一个是失败;但是经过对后端日志详细分析后发现后端的运作流程一切正常,没有发现异常的流程,这下就犯难了,又开始怀疑是不是快速操作导致的,可能是网络延迟导致前一个的结果还没送达,而第二次的结果就送达了,若是这样解释的话,也是可以理解的。后来又听说这现象是必现的,那总不可能都是网络原因吧。于是只好检查前端代码了,由于这些代码是其他同事很早之前写的,也没有怀疑会有逻辑和语法错误,一边梳理一遍自测,正好遇到同时弹出成功和失败的两个提示框,按下F12,一看console内容,提示有个变量是未定义的,一看代码原来是语法错误,在axios的then中使用了this对象,用this引用属性,导致抛出异常,就这么一个低级错误,隐藏这么深,不起眼,浪费我耗时这么久才发现,通过变量替换就可以了,用self替换this即可。
小结:个人觉得在函数体的开头最好定义let self=this,在函数体的其它地方统一使用self访问属性和方法,避免低级错误的发生。
20191108闪
JS中axios使用注意点的更多相关文章
- vue.js中axios的封装
基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...
- 【原创】Vue.js 中 axios 跨域访问错误
1.假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
- 前台框架vue.js中怎样嵌入 Echarts 组件?
目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...
- 「Vue」vue cli3中axios的基本用法
1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...
随机推荐
- Redis的“假事务”与分布式锁
关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...
- bootstrap的自适应 和细节点
bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...
- File类和枚举
java.io.File类:文件和目录路径名的抽象表示形式 File类常见构造方法: File(String pathname):通过将给定路径名字符串转换为抽象路径名来创建一个新 File 实例. ...
- Linux运维---1.磁盘相关知识
一 磁盘物理结构 (1) 盘片:硬盘的盘体由多个盘片叠在一起构成. 在硬盘出厂时,由硬盘生产商完成了低级格式化(物理格式化),作用是将空白的盘片(Platter)划分为一个个同圆心.不同半径的磁道(T ...
- Linux运维--实践-Rally
1.rally简介 OpenStack Rally 是一个自动化测试工具,社区希望通过 Rally 来解答 "How does OpenStack work at scale?(如何规模化运 ...
- TFT液晶显示屏之绘图板应用
应用范例: 使用 TOPWAY Smart LCD (HMT043FC-1C) 绘图板应用 第一步建立工程 ① 开TOPWAY TML Graphic Editor 2017 V1.04软件, 点击菜 ...
- Mumbai:1 Vulnhub Walkthrough
靶机地址: https://www.vulnhub.com/entry/mumbai-1,372/ 主机探测: 主机端口扫描: FTP 下载Note文件 TODO: Move these multip ...
- Android9.0 Settings 修改踩坑记录
问题现象 上图展示的很清楚,当系统语言为中文时,PreferenceScreen 中的折叠项 summary 描述重复显示的 bug,系统语言为英文时正常. 修改历程 先搜索 当前显示了 字符串,还真 ...
- SQLyog12.08详细安装教程
SQLyog安装教程 一.软件下载 为了更好的学习,我们需要可视化界面,而不仅仅是通过命令行黑窗口管理数据库.SQLyog 就是一个快速而简洁的图形化管理MYSQL数据库的工具. SQLyog12.0 ...
- mysql实现远程登录
CentOS7上安装mysql后,想要实现mysql远程登录. 主要解决二个问题:(1)为mysql用户授予远程登录权限(改表法或授权法):(2)防火墙开放3306端口. (一)授予登录权限 mysq ...