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

    一.什么是JDK,JRE JDK(Java Development Kit Java开发工具包) JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE.所以安装了JDK, ...

  2. 关键两步+6个要点，让Windows应用程序享有K8S的绝佳优势

    本文来自Rancher Labs 前  言 实际上,没有一个迁移路径能够适用于将所有传统应用程序迁移到云.这些应用程序通常在物理机.虚拟机或本地.虽然一般情况下是重新设计应用程序架构以适用云原生服务, ...

  3. codewars--js--Two Joggers--求最小公倍数、最大公约数

    问题描述: Two Joggers Description Bob and Charles are meeting for their weekly jogging tour. They both s ...

  4. Python json 序列号字典 文本的存储和读取

    rootDir='./resources/v1/'# 根目录 # 按钮测试图片 btnTestPicUrl = { 'armyAttack' : rootDir+'testPic/gj2.jpg', ...

  5. Android中Chronometer计时器的简单使用

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  6. iMacros 入门教程-基础函数介绍（2）

    imacros 的 pos 参数是什么意思 position的缩写,如果有 2 个以上的元素共用完全相同的属性(比方说同一个小区的同一栋楼),这个 POS 的参数可以借由不同位置来帮助明确定位(也就是 ...

  7. Kafka消费者没有收到通知的分析

    今天遇到两位三方人员跟我反馈,某微服务的异步接口功能不正常了,由于该异步接口采用Kafka异步消息的方案,对方说没有收到Kafka给消费者的通知,根据此问题,联系了相关人员进行了分析: (一)明确环境 ...

  8. 小程序上拉触底&下拉加载

    data: { pageNo: 1,//当前页 pageSize: 10,//每页条数 count:'',//总条数 orderList: [], }, onLoad: function () { v ...

  9. java设计模式学习笔记--接口隔离原则

    接口隔离原则简述 客户端不应该依赖它不需要的接口,即一个类对另一个类的依赖应建立在最小的接口上 应用场景 如下UML图 类A通过接口Interface1依赖类B,类C通过接口Interface1依赖类 ...

  10. Android实战项目——家庭记账本（三）

    今天完成的主要内容有: 1.主页面账单明细部分细节展示 2.对每个列表项,点击打开新的可编辑修改具体页面 3.实现了搜索页面的UI布局 4.优化了部分页面的UI,提升用户视觉和使用体验 实现效果如下: ...