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 1.7.2中getAll方法的疑惑分析
May 23 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python lxml模块安装教程
2015/06/02 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 下划线的不同用法
2020/10/24 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
python基础之类方法和静态方法
2021/10/24 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
java实现面板之间切换功能
2022/06/10 Java/Android