vue项目中axios使用详解


Posted in Javascript onFebruary 07, 2018

axios在项目中(vue)的使用

没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~

如果开发遇到跨域问题可以参考:https://3water.com/article/134571.htm

安装axios到项目中

npm install axios --save

配置wepack别名,不同环境访问不同的配置接口

配置:

vue项目中axios使用详解

使用:import config from 'config'

封装一个axios实例

新建fetch.js,在此创建axios实例与过滤器

若配置了代理。则config.apiBaseUrl则配置代理的前缀即可

import config from 'config'
import axios from 'axios'
// import qs from 'qs';

const instance = axios.create({
 baseURL: config.apiBaseUrl, // api的base_url
 timeout: 10000,    // 请求超时时间
 // transformRequest: data => qs.stringify(data) 
});
axios默认提交格式为:application/json,转换后提交格式为application/x-www-form-urlencoded
在asp.net core中,需要在action方法上添加[FromBody]接收json格式的数据,正常的都是application/x-www-form-urlencoded故有此修改。
按照使用需要安装qs到项目中,可转换数据格式类型
npm install qs --save

使用qs转换请求对比图

vue项目中axios使用详解

给实例添加拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 return config;
 }, function (error) {
 // 对请求错误做些什么
 return Promise.reject(error);
 });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
 // 对响应数据做点什么
 return response;
}, function (error) {
 // 对响应错误做点什么
 return Promise.reject(error);
});
 // 最后暴露实例
export default instance

实例的调用

若配置了express代理,请求路径为:浏览器->express开发服务器-----发送请求---->接口服务器

import fetch from 'fetch.js'
//get
fetch({
 url:'/home/data',//完整的请求路径为fetch.js配置的baseURL+/home/data?pageIndex=1
 method:'GET',
 params:{pageIndex:1}
})
//post
fetch({
 baseURL:'/api/v1',//完整的请求路径为/api/v1/home/save
 url:'/home/save',
 method:'POST',
 data:{id:1}
})

以上就是本次分享的关于vue项目中axios使用的全部内容,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Vue项目安装插件并保存
Jan 28 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 #Javascript
浅谈es6中export和export default的作用及区别
Feb 07 #Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 #Javascript
vue中如何使用ztree
Feb 06 #Javascript
javascript回调函数详解
Feb 06 #Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
You might like
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
拖拉表格的JS函数
2008/11/20 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
分析python请求数据
2018/08/19 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
医学生实习自荐信
2013/10/01 职场文书
应用英语专业自荐信
2014/01/26 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL