详解在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 中关于CSS操作部分使用说明
Jun 10 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
微信小程序实现图片上传
May 23 Javascript
TypeScript之调用栈的实现
Dec 31 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python下载网络小说实例代码
2018/02/03 Python
Numpy数组的保存与读取方法
2018/04/04 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
小学生安全保证书
2014/02/01 职场文书
优秀团队获奖感言
2014/02/19 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
中秋客户感谢信
2015/01/22 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript