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 相关文章推荐
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vuex state中的数组变化监听实例
Nov 06 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
微信小程序自定义导航栏
2018/12/31 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
详解JS函数防抖
2020/06/05 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
新学期开学寄语
2014/01/18 职场文书
数控专业自荐书范文
2014/03/16 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书