未加星标

vue项目中axios使用详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

axios在项目中(vue)的使用

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

如果开发遇到跨域问题可以参考:http://www.jb51.net/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使用的全部内容,感谢你对脚本之家的支持。


您可能感兴趣的文章:在vue中通过axios异步使用echarts的方法关于axios不能使用Vue.use()浅析vue+vuex+axios+echarts画一个动态更新的中国地图的方法vue.js简单配置axios的方法详解VueJs 搭建Axios接口请求工具基于vue配置axios的方法步骤浅谈在Vue-cli里基于axios封装复用请求vue项目中使用axios上传图片等文件操作Vue2.0 axios前后端登陆拦截器(实例讲解)vue2.0设置proxyTable使用axios进行跨域请求的方法vue使用axios跨域请求数据问题详解vue中axios处理http发送请求的示例(Post和get)vue axios同步请求解决方案详解vue axios中文文档

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器浏览器数据
tags: axios,vue,config,请求,qs,data,import,fetch,home,js,error,function,return,save
分页:12
转载请注明
本文标题:vue项目中axios使用详解
本站链接:http://www.codesec.net/view/572475.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)