vue2.0使用axios交互里面的坑

vue使用axios交互时候会出现的问题大致有三个:

  1:本地调试跨域问题?

  2:post请求,传参不成功,导致请求失败?

  3:axios引用,在使用的组件里面引用

解决方案:

  问题一:跨域?

    解决本地调试跨域问题?

    反向代理---- 这个需要自己在配置文件里面去改配置,有个config下面的index.js文件

    

    

    上图是没有修改的,至于具体怎么修改,可以百度下,当然如果实在不会的话就调试时候,先把代码写好, npm run build 打包给后台在他那调试

  问题二:post请求,传参不成功,导致请求失败?(get请求的话直接按文档来就行)

    为什么?

    原因:因为axios post请求时候传参时候和传统的ajax有点不一样,别不是from提交的方式,说的简单点在

        如果你请求的接口是这样的:http://localhost:8086/web/checkSkill/getSkillList?key=123&currentPageNo=1  那你就要做处理

        怎么处理:qs.stringify( );如下图

        

          

        当然了,使用之前你需要先把qs引用过来:

        

        至于需不需先 npm install qs --save 这个随你,好像都可以,

        还有一种就是可能后台需要接收的参数格式是json对象格式,那怎么办?看下图:

        

        就这样处理

    问题三:axios引用

        就是你在那个组件使用了交互需要你在这个组件里面先引用一下,

        就是import axios from ‘axios‘  我当时是在全局(main.js)里面就引用了一下,然后就开始在其他组件里面用了,发现不好使,才单独引用的,

当然了,在使用axios之前还是不要忘了,先安装axios   npm install axios --save  具体的可以看文档!!!!

    

时间: 2024-10-15 01:59:46

vue2.0使用axios交互里面的坑的相关文章

Vue2.0史上最全入坑教程(下)—— 实战案例

前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 一. 项目说明 ps:这个简单小项目只提供一个小小小的骨架,需要向"它"身上具体加多少"肉",需要大家考虑好功能和布局后进行完善. 1.首先看下主页效果:如下图 主页分析:大体上分为上(header).中(body或content).下(footer)三部分,中间body部分是由

curl里面的坑

如果在使用粗crul library来进行远程请求(API调用)的时候要注意的一个坑.就是要区别请求成功,请求失败,请求成功但返回为空.这里要特别注意后2者,稍不注意就会掉坑.因为如果请求的url不存在或者连接超时(各种原因)的时候返回结果为false.所以不要简单的认为返回的数据为空.可以用$result === false为真来判断请求失败.因为一般的API不会返回boolean值的.引申一下,如果你是在制作一个API也请不要随意的返回一个空数据为false.这样会很难区分到底是数据为空还是

vue2.0 之 axios

一.下载axios cnpm install axios --save-dev(npm install axios --save-dev)这里的--save-dev:是上线过后还是需要使用的  -save:是编辑时候需要使用的 二.引入axios import axios from 'axios' 三.使用axios 使用axios的两种方式: 1.把axios写在Vue的原型链中 Vue.prototype.$http = axios;

ACCESS 里面的坑

在vs2005中用sql语句访问access数据库出现replace函数未定义错误,后来查询得知,在不能用replace访问access. 问题:   1.为什么以前运行正常的Access数据库,搬到另一台电脑上老出现XXXX函数未定义错误? 2.为什么我在Access中调试通过的sql语句,在VB/ASP/JSP/PHP/VB.NET/SQL SERVER中调用却老是出现XXX函数未定义错误? 3.在ACCESS中的模块中自定义了一个getV函数,在ACCESS查询中执行SQL语句 selec

三种实现AJAX的方法以及Vue和axios结合使用的坑

前言 之前曾经想自己写一个天气的App,并找到了一个免费的天气数据接口的服务商--和风天气,当时也不懂怎么发HTTP请求,而且也只会用Java语言,看到官方文档里面有一个Java代码示例,就复制了一下在自己电脑上调通.一开始是在控制台输出天气数据的,后来用Swing写了一个图形化界面并放置数据,但也就到此为止了,并没有什么实用价值. 最近学习了一下前端的相关知识,发现像和风天气这样的数据接口,根本不需要用到像Java这样的大型语言,只需在网页端用Javascript发HTTP请求就能获得JSON

Secure CRT 如何连接虚拟机里面的CentOS系统 当主机使用有线网的时候 作者原创 欢迎转载

1.虚拟机的网卡配置如下图所示: 2.在CentOS 5.8的命令行界面:输入如下指令 然后准备修改里面的网关地址和自己的IP地址 3.同时查看自己的IP地址和网关 4.在第二步里面修改,网关地址应该和本机的网关地址是一样的,IP地址应该和本机的IPV4地址在同一个网段上,都是192.168.0.X,虚拟机里面的CentOS系统的网关地址和主机的gateway地址设置的应该是一样的 5.修改完毕之后,虚拟机里面按ESC键,然后输入":"(冒号不用输入),回车,最后输入"wq!

vue2.0+webpack+vuerouter+vuex+axios构建项目基础

前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装. 2.安装vue脚手架 npm install vue-cli -g 3.运行cmd(开始-运行-cmd-回车) 比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车cd到项

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

Vue2.0 新手完全填坑攻略——从环境搭建到发布

本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai) 原文链接 https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu 文章允许非篡改署名转载,删除或修改本段版权信息转载的,视为侵犯知识产权,我们保留追求您法律责任的权利,特此声明! 感谢 showonne.yubang 技术指导 Demo 地址