详解在Vue中如何使用axios跨域访问数据


Posted in Javascript onJuly 07, 2017

最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品,官网也说了,以后都用axios,

vue-resource不在维护。那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过。至少我按照网上的做法,总不能成功。经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用。

一、安装axios

老规矩,要想使用axios,我们得安装它,安装方式:npm install axios

二、客户端使用方式

先来看看网上的答案,如图所示,我已经在图上标识过了,这种做法是错误的。

详解在Vue中如何使用axios跨域访问数据

正确的做法是去掉post,如图所示:

详解在Vue中如何使用axios跨域访问数据

详解在Vue中如何使用axios跨域访问数据

三、服务器端设置

虽然客户端跨域设置好了,但是你还是不能访问接口数据,必须在服务器端设置header属性,如图所示:

详解在Vue中如何使用axios跨域访问数据

四、axios方法封装

一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:

详解在Vue中如何使用axios跨域访问数据

五、封装后的方法的使用

1、在main.js文件里引用之前写好的文件,我的命名为http.js

详解在Vue中如何使用axios跨域访问数据

2、在需要的地方之间调用,如图所示:

详解在Vue中如何使用axios跨域访问数据

说明:

GET调用方法如下,其中url是接口地址

this.$get(url).then((res) {

//代码

});

POST调用方法如下,其中url是接口地址,data是请求的数据。

this.$post(url,data).then({

//代码

});

PATCH调用方法如下,其中url是接口地址,data是请求的数据

this.$patch(url,data).then({


//代码

});

PUT调用方法如下,其中url是接口地址,data是请求的数据

this.$put(url,data).then({

//代码

});

看了以上内容,是不是很简单,其实也没啥的,但是就是这个问题卡了我好久,在看看网上的答案,真的是不堪一击。问题解决了,内心真的好激动啊  O(∩_∩)O哈!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
理解javascript正则表达式
Mar 08 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
Javascript通过控制类名更改样式
May 24 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
微信小程序联网请求的轮播图
Jul 07 #Javascript
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
vue.js实例todoList项目
Jul 07 #Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
九步学会Python装饰器
2015/05/09 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
证券期货行业个人的自我评价
2013/12/26 职场文书
学习党课思想汇报
2013/12/29 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
安全环保演讲稿
2014/08/28 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
文明上网主题班会
2015/08/14 职场文书
2016年教代会开幕词
2016/03/04 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS