vue axios全攻略
再也不继续维护vue-resource，并推荐你们使用 axios 开始，axios 被愈来愈多的人所了解。原本想在网上找找详细攻略，忽然发现，axios 的官方文档自己就很是详细！！有这个还要什么自行车！！因此推荐你们学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信你们只要吃透本文再加以实践，axios 就是小意思啦！！vue
若是您以为本文对您有帮助，不妨点个赞或关注收藏一下，您的鼓励对我很是重要。node
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它自己具备如下特征：jquery
- 从浏览器中建立 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
浏览器兼容性
引入方式：
|
1
2
3
4
5
|
$ npm install axios
$ cnpm install axios
//taobao源
$ bower install axios
或者使用cdn：
<script src=
"https://unpkg.com/axios/dist/axios.min.js"></script>
|
举个栗子：
执行 GET 请求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 向具备指定ID的用户发出请求
axios.get(
'/user?ID=12345')
.then(
function (response) {
console.log(response);
})
.catch(
function (error) {
console.log(error);
});
// 也能够经过 params 对象传递参数
axios.get(
'/user', {
params: {
ID: 12345
}
})
.then(
function (response) {
console.log(response);
})
.catch(
function (error) {
console.log(error);
});
|
执行 POST 请求
|
1
2
3
4
5
6
7
8
9
10
|
axios.post(
'/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(
function (response) {
console.log(response);
})
.catch(
function (error) {
console.log(error);
});
|
执行多个并发请求
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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 API
能够经过将相关配置传递给 axios 来进行请求。ios
axios(config)
|
1
2
3
4
5
6
7
8
9
|
// 发送一个 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
|
axios(url[, config])
|
1
2
|
// 发送一个 GET 请求 (GET请求是默认请求模式)
axios(
'/user/12345');
|
请求方法别名
为了方便起见，已经为全部支持的请求方法提供了别名。npm
- 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属性。json
并发
帮助函数处理并发请求。axios
- axios.all（iterable）
- axios.spread（callback）
建立实例
您可使用自定义配置建立axios的新实例。api
axios.create（[config]）数组
|
1
2
3
4
5
|
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
|
实例方法
可用的实例方法以下所示。 指定的配置将与实例配置合并。promise
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。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
{
// `url`是将用于请求的服务器URL
url:
'/user',
// `method`是发出请求时使用的请求方法
method:
'get', // 默认
// `baseURL`将被添加到`url`前面，除非`url`是绝对的。
// 能够方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
baseURL:
'https://some-domain.com/api/',
// `transformRequest`容许在请求数据发送到服务器以前对其进行更改
// 这只适用于请求方法'PUT'，'POST'和'PATCH'
// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
transformRequest: [
function (data) {
// 作任何你想要的数据转换
return data;
}],
// `transformResponse`容许在 then / catch以前对响应数据进行更改
transformResponse: [
function (data) {
// Do whatever you want to transform the data
return data;
}],
// `headers`是要发送的自定义 headers
headers: {
'X-Requested-With': 'XMLHttpRequest'},
// `params`是要与请求一块儿发送的URL参数
// 必须是纯对象或URLSearchParams对象
params: {
ID: 12345
},
// `paramsSerializer`是一个可选的函数，负责序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer:
function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data`是要做为请求主体发送的数据
// 仅适用于请求方法“PUT”，“POST”和“PATCH”
// 当没有设置`transformRequest`时，必须是如下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: {
firstName: 'Fred'
},
// `timeout`指定请求超时以前的毫秒数。
// 若是请求的时间超过'timeout'，请求将被停止。
timeout:
1000,
// `withCredentials`指示是否跨站点访问控制请求
// should be made using credentials
withCredentials:
false, // default
// `adapter'容许自定义处理请求，这使得测试更容易。
// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））
adapter:
function (config) {
/* ... */
},
// `auth'表示应该使用 HTTP 基本认证，并提供凭据。
// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// “responseType”表示服务器将响应的数据类型
// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType:
'json', // default
//`xsrfCookieName`是要用做 xsrf 令牌的值的cookie的名称
xsrfCookieName:
'XSRF-TOKEN', // default
// `xsrfHeaderName`是携带xsrf令牌值的http头的名称
xsrfHeaderName:
'X-XSRF-TOKEN', // default
// `onUploadProgress`容许处理上传的进度事件
onUploadProgress:
function (progressEvent) {
// 使用本地 progress 事件作任何你想要作的
},
// `onDownloadProgress`容许处理下载的进度事件
onDownloadProgress:
function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength`定义容许的http响应内容的最大大小
maxContentLength:
2000,
// `validateStatus`定义是否解析或拒绝给定的promise
// HTTP响应状态码。若是`validateStatus`返回`true`（或被设置为`null` promise将被解析;不然，promise将被
// 拒绝。
validateStatus:
function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
// 若是设置为0，则不会遵循重定向。
maxRedirects:
5, // 默认
// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
// 容许配置相似`keepAlive`的选项，
// 默认状况下不启用。
httpAgent:
new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy'定义代理服务器的主机名和端口
// `auth`表示HTTP Basic auth应该用于链接到代理，并提供credentials。
// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// “cancelToken”指定可用于取消请求的取消令牌
// (see Cancellation section below for details)
cancelToken:
new CancelToken(function (cancel) {
})
}
|
使用 then 时，您将收到以下响应：
|
1
2
3
4
5
6
7
8
|
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默认值
|
1
2
3
|
axios.defaults.baseURL =
'https://api.example.com';
axios.defaults.headers.common[
'Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post[
'Content-Type'] = 'application/x-www-form-urlencoded';
|
自定义实例默认值
|
1
2
3
4
5
6
7
|
//在建立实例时设置配置默认值
var instance = axios.create（{
baseURL：
'https://api.example.com'
}）;
//在实例建立后改变默认值
instance.defaults.headers.common [
'Authorization'] = AUTH_TOKEN;
|
配置优先级顺序
配置将与优先顺序合并。 顺序是lib / defaults.js中的库默认值，而后是实例的defaults属性，最后是请求的config参数。 后者将优先于前者。 这里有一个例子。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//使用库提供的配置默认值建立实例
//此时，超时配置值为`0`，这是库的默认值
var instance = axios.create（）;
//覆盖库的超时默认值
//如今全部请求将在超时前等待2.5秒
instance.defaults.timeout =
2500;
//覆盖此请求的超时，由于它知道须要很长时间
instance.get（
'/ longRequest'，{
timeout：
5000
}）;
|
拦截器
你能够截取请求或响应在被 then 或者 catch 处理以前
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//添加请求拦截器
axios.interceptors.request.use（
function（config）{
//在发送请求以前作某事
return config;
}，
function（error）{
//请求错误时作些事
return Promise.reject（error）;
}）;
//添加响应拦截器
axios.interceptors.response.use（
function（response）{
//对响应数据作些事
return response;
}，
function（error）{
//请求错误时作些事
return Promise.reject（error）;
}）;
|
若是你之后可能须要删除拦截器。
|
1
2
|
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
|
你能够将拦截器添加到axios的自定义实例。
|
1
2
|
var instance = axios.create();
instance.interceptors.request.use(
function () {/*...*/});
|
处理错误
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
axios.get（
'/ user / 12345'）
.catch（
function（error）{
if（error.response）{
//请求已发出，但服务器使用状态代码进行响应
//落在2xx的范围以外
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状态码错误范围。
|
1
2
3
4
5
|
axios.get（
'/ user / 12345'，{
validateStatus：
function（status）{
return status < 500; //仅当状态代码大于或等于500时拒绝
}}
}）
|
消除
您可使用取消令牌取消请求。
axios cancel token API基于可取消的promise提议，目前处于阶段1。
您可使用CancelToken.source工厂建立一个取消令牌，以下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var CancelToken = axios.CancelToken;
var source = CancelToken.source（）;
axios.get(
'/user/12345', {
cancelToken: source.token
}).catch(
function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
}
else {
// 处理错误
}
});
//取消请求（消息参数是可选的）
source.cancel（
'操做被用户取消。'）;
|
您还能够经过将执行器函数传递给CancelToken构造函数来建立取消令牌：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var CancelToken = axios.CancelToken;
var cancel;
axios.get（
'/ user / 12345'，{
cancelToken：
new CancelToken（function executor（c）{
//一个执行器函数接收一个取消函数做为参数
cancel = c;
}）
}）;
// 取消请求
clear();
|
注意：您可使用相同的取消令牌取消几个请求。
使用application / x-www-form-urlencoded格式
默认状况下，axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据，您可使用如下选项之一。
浏览器
在浏览器中，您可使用URLSearchParams API，以下所示：
|
1
2
3
4
|
var params = new URLSearchParams();
params.append(
'param1', 'value1');
params.append(
'param2', 'value2');
axios.post(
'/foo', params);
|
请注意，全部浏览器都不支持URLSearchParams，可是有一个polyfill可用（确保polyfill全局环境）。
或者，您可使用qs库对数据进行编码：
|
1
2
|
var qs = require('qs');
axios.post(
'/foo', qs.stringify({ 'bar': 123 });
|
Node.js
在node.js中，可使用querystring模块，以下所示：
|
1
2
|
var querystring = require('querystring');
axios.post(
'http://something.com/', querystring.stringify({ foo: 'bar' });
|
你也可使用qs库。
Promise
axios 依赖本机要支持ES6 Promise实现。 若是您的环境不支持ES6 Promises，您可使用polyfill。
TypeScript
axios包括TypeScript定义。
|
1
2
|
import axios from 'axios';
axios.get(
'/user?ID=12345');
|
axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。
相关文章
- 1. vue axios全攻略
- 2. axios全攻略
- 3. 【转】axios全攻略
- 4. Vue.js——vue-resource全攻略
- 5. axios 全攻略之基本介绍与使用（GET 与 POST）
- 6. Redis全攻略
- 7. CSS 全攻略
- 8. jquery.validate全攻略
- 9. nagios全攻略
- 10. Ant全攻略
- 更多相关文章...
- • ASP.NET MVC - 安全 - ASP.NET 教程
- • Docker 命令大全 - Docker教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
欢迎关注本站公众号,获取更多信息
相关文章
- 1. vue axios全攻略
- 2. axios全攻略
- 3. 【转】axios全攻略
- 4. Vue.js——vue-resource全攻略
- 5. axios 全攻略之基本介绍与使用（GET 与 POST）
- 6. Redis全攻略
- 7. CSS 全攻略
- 8. jquery.validate全攻略
- 9. nagios全攻略
- 10. Ant全攻略