vue.js简单配置axios的方法详解


Posted in Javascript onDecember 13, 2017

前言

官方现在已经不再推荐用resource了,换了个axios,咱也不能落后,至少你得知道咋弄,面试的时候也好给面试官吹吹牛逼,废话不多说。

它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

配置方法

首先用npm安装

npm install --save axios vue-axios

安装完之后,在你的main.js文件里配置,加上这两句就好

import axios from 'axios'
Vue.prototype.$http = axios

然后你读取接口数据的时候,直接就可以这样写,这个跟resource一个样,我那个下面的op,uin之类的都是要传的参数。

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });

好了,搞定!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery ui插件的使用方法代码实例
May 08 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
js比较日期大小的方法
May 12 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
vue组件间通信解析
Mar 01 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
用js简单提供增删改查接口
May 12 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 #Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 #Javascript
node vue项目开发之前后端分离实战记录
Dec 13 #Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 #Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 #Javascript
Angular4编程之表单响应功能示例
Dec 13 #Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 #Javascript
You might like
Java中final关键字详解
2015/08/10 PHP
PHP微信红包API接口
2015/12/05 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python opencv进行图像拼接
2020/03/27 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
乡镇交通安全实施方案
2014/03/29 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
文秘个人求职信范文
2014/04/22 职场文书
办公室文员岗位职责
2015/02/04 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS