客户端项目中有一个小需求“我的卡券”,有单独入口,所以综合考虑之后,采用了vue来实现,因为是初次使用,导致了选型不当,先用了SUI-Mobile来搭建页面,当决定使用vue的时候,页面也搭建完毕了,最终结果就是使用vue+SUI-Mobile+vue-router实现了这么一个小需求。

  中间考虑使用axios来作异步请求的,但是很不幸的是,在请求接口的时候axios报了404,由于有方便替代的Zepto封装的ajax,所以当时直接改用ajax来请求了,也没有去研究究竟什么原因导致的axios请求报错的。这段时间,相对不那么忙的时候,想到这个问题,就回过头来把这块的vue代码做了一个简单的review,修改了一些明显不那么合适的vuejs的代码,然后就将目标定在了异步请求上面。

  先看一下,正确的ajax代码,真实的接口就以变量interface替代:

    getData(){
var _this = this;
$.showIndicator();
var ctx = GetQueryString("path");
$.ajax({
type: "post",
url:ctx+interface,
data:{"coupon_status":1},
success:function(data){
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
}
})
}

  除了真实的接口,这就是之前使用的能够正常请求的ajax请求。

  下面改造为axios格式的 

    getData(){
var _this = this;
var ctx = GetQueryString("path");
$.showIndicator();
axios.post(ctx + interface, {"coupon_status":1}).then((res)=>{
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
})
}

  一眼看过去,除了将ajax改为axios,我相信大多数人是看不出有什么问题的

但是事实就是:报错了,而且报404错误

不明原因的ctx获取的值出现了重复的educloud,而在ajax请求时却是正常的,导致了接口报404。

通过翻阅axios在GitHub网站api,引用原文You can specify config defaults that will be applied to every request.就是对每一个请求接口设定一些默认配置。

axios.defaults.baseURL = ctx;

  再请求一次接口

  

  不再报404错误了,而是400,那400是什么呢?

400错误是由于不正确的请求造成的,说明正在搜索的网页可能已经删除、更名或暂时不可用。

  关键在于请求不正确,说明接口已经请求到了,但是当前请求接口有问题,然而ajax请求是正常的,那么问题又在什么地方呢?如果经验比较丰富一点的,很容易联想到是不是参数有问题?

  继续翻看api,发现

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

  这里对参数进行了一下处理,那么就照着来吧

    import axios from "axios"
var ctx = GetQueryString("path");
var qs = require('qs');
axios.defaults.baseURL = ctx;
getData(){
var _this = this;
$.showIndicator();
axios.post(interface, qs.stringify({
"coupon_status":0
})).then(function (response) {
console.log(response)
var data = response.data;
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
}).catch((err)=>{
console.log(err)
})

  很荣幸,问题解决了,接口已经可以正确返回数据了。

  总结一下:

  axios在调用接口产生问题时,一方面可能是因为接口url不对,那么通过配置默认的baseURL,另一方面,考虑post参数问题,不能直接传递一个JS对象,而需要通过qs.stringify(对象)转换一下。

  试图使用JSON.stringify()转换,很不幸,不可以。 

  

  

vue搭配axios踩坑的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. Vue中axios踩坑之路-POST传参

    https://blog.csdn.net/call_me_fly/article/details/79012581

  4. vue配置环境踩坑

    Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下c ...

  5. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  6. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  7. [ vue ] quasar框架踩坑:在vue文件外导入路由,执行router.push('/')没有效果

    问题描述: 1. 如图所示的项目结构目录, axios.js 文件负责拦截全局请求和回复,我在拦截回复的代码中写了:如果服务器回复了一个401错误,则执行Router.push('/'),但是该方法失 ...

  8. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  9. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

随机推荐

  1. 维护贴--验证可用--mysql给root开启远程访问权限,修改root密码(转)

    1.MySql-Server 出于安全方面考虑只允许本机(localhost, 127.0.0.1)来连接访问. 这对于 Web-Server 与 MySql-Server 都在同一台服务器上的网站架 ...

  2. NET设计模式 第二部分 结构性模式(12):享元模式(Flyweight Pattern)

    享元模式(Flyweight Pattern) ——.NET设计模式系列之十三 Terrylee,2006年3月 摘要:面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情 ...

  3. 深入理解ASP.NET MVC(3)

    系列目录 URL是如何通过路由表生成的(outbound) 通常我们被推荐在view设计时使用Html.ActionLink(…)产生链接,这样做的优势就是,url可以根据路由表生成.路由机制的另一个 ...

  4. Linux VMware安装CentOS

    VMware安装CentOS   1           检查BIOS虚拟化支持 2           新建虚拟机 3           新建虚拟机向导 4           创建虚拟空白光盘 ...

  5. Spark应用HanLP对中文语料进行文本挖掘--聚类详解教程

    软件:IDEA2014.Maven.HanLP.JDK: 用到的知识:HanLP.Spark TF-IDF.Spark kmeans.Spark mapPartition; 用到的数据集:http:/ ...

  6. FFMPEG Qt视频播放器

    本文是根据PaintEvent事件处理函数不停在组件中绘制视频帧数据 做过图像界面开发的都知道,任何耗时的操作都不能放在主线程进行,一旦主线程阻塞了,那么体现出来的就是界面卡了. 而我们读取视频和解码 ...

  7. Java WebService 简单实例[转载]

    [注意,本文转载自  http://hyan.iteye.com/    ] 一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1 ...

  8. python调用tcpdump抓包过滤

    之前在linux用python脚本写一个抓包分析小工具,实在不想用什么libpcap.pypcap所以,简单来了个tcpdump加grep搞定.基本思路是分别起tcpdump和grep两个进程,进程直 ...

  9. Visual studio 下C++工程相关经验

    1.链接其他库调试时产生告警: warning LNK4099: 未找到 PDB“vc100.pdb” 解决方案:属性 -> C/C++ -> 输出文件 -> 程序数据库文件名 -& ...

  10. Hadoop 管理工具HUE配置-集成Unix用户和用户组

    HUE安装完成之后,第一次登录的用户就是HUE的超级用户,可以管理用户,等等.但是在用的过程发现一个问题这个用户不能管理HDFS中由supergroup创建的数据. 虽然在HUE中创建的用户可以管理自 ...