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.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JavaScript文档对象模型DOM
Nov 20 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几个数学计算的内部函数学习整理
2011/08/06 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
js实现列表按字母排序
2020/08/11 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python获取当前时间的方法
2014/01/14 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
最新党员思想汇报
2014/01/01 职场文书
领导干部培训感言
2014/01/23 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android