vue axios全攻略 - CSDN博客
vue axios全攻略
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！
如果您觉得本文对您有帮助，不妨点个赞或关注收藏一下，您的鼓励对我非常重要。
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止&
浏览器兼容性
引入方式：
$ npm install axios
$ cnpm install axios&
$ bower install axios
或者使用cdn：
&script src=&/axios/dist/axios.min.js&&&/script&
举个栗子：
执行 GET 请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
axios.get('/user', {
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
执行 POST 请求
axios.post('/user', {
firstName:&'Fred',
lastName:&'Flintstone'
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
执行多个并发请求
function&getUserAccount()
return axios.get('/user/12345');
function&getUserPermissions()
return axios.get('/user/12345/permissions');
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
可以通过将相关配置传递给 axios 来进行请求。
axios(config)
method:&'post',
url:&'/user/12345',
firstName:&'Fred',
lastName:&'Flintstone'
axios(url[, config])
axios('/user/12345');
请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。
axios.request（config）axios.get（url [，config]）axios.delete（url [，config]）axios.head（url [，config]）axios.post（url [，data [，config]]）axios.put（url [，data [，config]]）axios.patch（url [，data [，config]]）
当使用别名方法时，不需要在config中指定url，method和data属性。
帮助函数处理并发请求。
axios.all（iterable）axios.spread（callback）
您可以使用自定义配置创建axios的新实例。
axios.create（[config]）
var instance = axios.create({
baseURL:&'/api/',
timeout:&1000,
headers: {'X-Custom-Header':&'foobar'}
可用的实例方法如下所示。 指定的配置将与实例配置合并。
axios＃request（config）
axios＃get（url [，config]）
axios＃delete（url [，config]）
axios＃head（url [，config]）
axios＃post（url [，data [，config]]）
axios＃put（url [，data [，config]]）
axios＃patch（url [，data [，config]]）
这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法，请求将默认为GET。
url:&'/user',
method:&'get',&
baseURL:&'/api/',
transformRequest: [function (data) {
transformResponse: [function (data) {
headers: {'X-Requested-With':&'XMLHttpRequest'},
paramsSerializer:&function(params) {
return Qs.stringify(params, {arrayFormat:&'brackets'})
firstName:&'Fred'
timeout:&1000,
withCredentials:&false,&
adapter:&function (config) {
username:&'janedoe',
password:&'s00pers3cret'
responseType:&'json',&
xsrfCookieName:&'XSRF-TOKEN',&
xsrfHeaderName:&'X-XSRF-TOKEN',&
onUploadProgress:&function (progressEvent) {
onDownloadProgress:&function (progressEvent)
maxContentLength:&2000,
validateStatus:&function (status) {
return status &=&200 && status &&300;&
maxRedirects:&5,&
httpAgent:&new http.Agent({&keepAlive:&true }),
httpsAgent:&new https.Agent({&keepAlive:&true
host:&'127.0.0.1',
port:&9000,
username:&'mikeymike',
password:&'rapunz3l'
cancelToken:&new CancelToken(function (cancel)
使用 then 时，您将收到如下响应：
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
配置默认值
您可以指定将应用于每个请求的配置默认值。
全局axios默认值
axios.defaults.baseURL =&'';
axios.mon['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] =&'application/x-www-form-urlencoded';
自定义实例默认值
var instance = axios.create（{
&& baseURL：''
instance.mon ['Authorization'] = AUTH_TOKEN;
配置优先级顺序
配置将与优先顺序合并。 顺序是lib / defaults.中的库默认值，然后是实例的defaults属性，最后是请求的config参数。 后者将优先于前者。 这里有一个例子。
var instance = axios.create（）;
instance.defaults.timeout =&2500;
instance.get（'/ longRequest'，{
&& timeout：5000
你可以截取请求或响应在被 then 或者 catch 处理之前
axios.interceptors.request.use（function（config）{
&& }，function（error）{
&&&&&return&Promise.reject（error）;
axios.interceptors.response.use（function（response）{
&& }，function（error）{
&&&&&return&Promise.reject（error）;
如果你以后可能需要删除拦截器。
var myInterceptor = axios.interceptors.request.use(function
axios.interceptors.request.eject(myInterceptor);
你可以将拦截器添加到axios的自定义实例。
var instance = axios.create();
instance.interceptors.request.use(function ()
axios.get（'/ user / 12345'）
&& .catch（function（error）{
&&&&&if（error.response）{
&&&&&&&console.log（error.response.data）;
&&&&&&&console.log（error.response.status）;
&&&&&&&console.log（error.response.headers）;
&&&& }&else {
&&&&&&&console.log（'Error'，error.message）;
&&&&&console.log（error.config）;
您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。
axios.get（'/ user / 12345'，{
&& validateStatus：function（status）{
&&&&&return status &&500;&
您可以使用取消令牌取消请求。
axios cancel token API基于可取消的promise提议，目前处于阶段1。
您可以使用CancelToken.source工厂创建一个取消令牌，如下所示：
var CancelToken = axios.CancelT
var source = CancelToken.source（）;
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
source.cancel（'操作被用户取消。'）;
您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌：
var CancelToken = axios.CancelT
axios.get（'/ user / 12345'，{
&& cancelToken：new CancelToken（function&executor（c）{
&&&& cancel =
注意：您可以使用相同的取消令牌取消几个请求。
使用application / x-www-form-urlencoded格式
默认情况下，axios将对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。
在浏览器中，您可以使用URLSearchParams API，如下所示：
var params =&new URLSearchParams();
params.append('param1',&'value1');
params.append('param2',&'value2');
axios.post('/foo', params);
请注意，所有浏览器都不支持URLSearchParams，但是有一个polyfill可用（确保polyfill全局环境）。
或者，您可以使用qs库对数据进行编码：
var qs =&require('qs');
axios.post('/foo', qs.stringify({&'bar':&123 });
在中，可以使用querystring模块，如下所示：
var querystring =&require('querystring');
axios.post('/', querystring.stringify({&foo:&'bar'
你也可以使用qs库。
axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises，您可以使用polyfill。
TypeScript
axios包括TypeScript定义。
import axios&from&'axios';
axios.get('/user?ID=12345');
axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。
本文已收录于以下专栏：
相关文章推荐
基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 h...
尤雨溪之前在微博发布消息，不再继续维护vue-resource，并推荐大家开始使用 axios 。
axios 是一个基于Promise 用于浏览器和...
Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法
添加新建.vue文件功能
①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击se...
一.methods和computed
computed是计算属性，methods是方法。
p&Reversed
message: &{{ reversedMessage() }}...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（三）认识项目所有文件在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（...
Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》《Vue2+VueRouter2+we...
jh3rZF镀匕匪柑寿偌/songlist/
RH91j3一奶俣勺献盟/songlist/4...
如何让孩子掌握学习外语的技巧呢？其实所有的语言学习，都是孩子通过听、看、模仿和操练不断积累逐渐习得的，不管采取何种学习形式，最重要的一点要使学习趣味化。　　愉快学习是孩子学好语言的重要前提。因为脑分四...
1.父组件传递数据给子组件
父组件数据如何传递给子组件呢？可以通过props属性来实现
child :child-msg=&msg&&/child&//这里必须要...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件前情回顾在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)axios.js提交表单数据的解决办法 - 甘焕的博客 - CSDN博客
axios.js提交表单数据的解决办法
javascript
axios因为小巧而性能强大受到很多人的追捧，但是其默认的数据提交方式为Payload，这样给后台解析带来了较大的困扰，因为难以从Request中获取到参数，所以默认的数据对象拼装无法成功 ，尤其是采用Spring MVC的@ModalAttribute注解时(没有使用@RequestBody注解)。表单数据与Payload数据之间的差异请参见。
解决方法如下：
1. 修改头部信息，将Content-Type改为“application/x-www-form-urlencoded”; charset=UTF-8”;
2. 将数据进行“form-urlencoded”编码；
编码的库采用官方推荐的，可用如下命令直接安装：
npm install qs --save
以Form提交的代码实现如下：
var data =
Qs.stringify({
firstName: 'yiifaa',
lastName: '@'
method: 'post',
url: '/user/12345',
headers : {
"Content-Type":'application/x-www-form- charset=UTF-8'
如果存在数据的级联与数组情况，假定要传输的数据如下；
startTime : ''
names : ['yiifaa', 'yiifee']
那么需要加入以下参数:
var data =
Qs.stringify({
startTime : ''
names : ['yiifaa', 'yiifee']
{allowDots: true});
最后提交Form Data的效果如下：
.startTime:
[0]:yiifaa
[1]:yiifee
刚好是Spring MVC要求的数据格式。
利用”Content-Type”与qs库可轻松解决axios.js提交表单数据的难题，强烈建议不要轻易使用params参数，尤其是在执行POST提交时，它们之间的区别参见。
我的热门文章在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vue中用axios发请求，需要传一个数组，数组中是对对象，直接传的话，会默认调用string方法传入的是[object,object],然后用JSON.stringify方法转换了一下，还是不行，数组要怎样传啊？
productList:JSON.stringify([{
priceStockId:this.priceStockId,
productTypeName:this.productTypeName,
productNoName:this.productNoName,
productValueName:this.productValueName
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
使用JSON.stringify是可以的，但是你说还是不行
你上面这种方法是可以的，但并不一定是后端需要的格式。415是服务器返回的错误，而不是浏览器错误，意思是说，你的请求已经到了服务端，但是服务端不能正确处理你的请求，或者是存在其他的问题。参考资料：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
POST传数组没问题，data支持json格式。
GET数据带在url后面，转字符串就可以了。
大概是你的姿势不太对，请让大家看看你的姿势。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
url传参能成功，data传参却老是失败？求解
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
axios中get、post传参的方式不同：
axios.get('url', {params: data});
axios.post('url', data)
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：