axios全攻略

随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解。本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!!有这个还要什么自行车!!所以推荐大家学习这种库,最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档,相信大家只要吃透本文再加以实践,axios 就是小意思啦!!

如果您觉得本文对您有帮助,不妨点个赞或关注收藏一下,您的鼓励对我非常重要。

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:


  • 从浏览器中创建 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 来进行请求。

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‘);

请求方法别名

为了方便起见,已经为所有支持的请求方法提供了别名。

  • 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])


1

2

3

4

5


var instance = axios.create({

baseURL: ‘https://some-domain.com/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。


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服务。

时间: 2024-10-13 11:31:20

axios全攻略的相关文章

axios 全攻略之基本介绍与使用(GET 与 POST)

axios axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务 Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助.^_^ 功能 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换 JSON 数据格式 客户端支持防

活水渠 - 云影院之云时代看片全攻略

本文讨论了大数据时代最热门的两大应用之一的云计算(另一应用是物联网)对网络视频观看体验的具体影响,以及在观看方式上区别于传统下载方式的优点. 一.视频门户类网站 此类网站以优酷.乐视等为代表,主营传统网络视频业务,使用浏览器进行直接点击链接进行观看. 优点:电视节目丰富.观看技术手段简单.大型网站服务器稳定 缺点:看不了热门电影,精华视频要收费,免费用户要看广告 解决:浏览器辅助工具或插件解决收费和广告问题,在此基础上还诞生了视频门户网 站的入口集成网站,每天看云帆可免VIP直接观看主流视频门户

fiddler Android下https抓包全攻略

fiddler Android下https抓包全攻略 fiddler的http.https的抓包功能非常强大,可非常便捷得对包进行断点跟踪和回放,但是普通的配置对于像招商银行.支付宝.陌陌这样的APP是抓不到包的,需要一些特殊的配置,本文把fiddler Android下https抓包的详细配置都罗列出来,供大家参考. 一.普通https抓包设置 先对Fiddler进行设置: 勾选“CaptureHTTPS CONNECTs”,接着勾选“Decrypt HTTPS traffic”.同时,由于我

webBrowser中操作网页元素全攻略

webBrowser中操作网页元素全攻略 2012-12-20 14:21 188人阅读 评论(0) 收藏 举报 1.获取非input控件的值: webBrowser1.Document.All["控件ID"].InnerText; 或webBrowser1.Document.GetElementById("控件ID").InnerText; 或webBrowser1.Document.GetElementById("控件ID").GetAttr

Windows Socket五种I/O模型——代码全攻略(转)

Winsock 的I/O操作: 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待,不会将控制权交给程序.套接字 默认为阻塞模式.可以通过多线程技术进行处理. 非阻塞模式:执行I/O操作时,Winsock函数会返回并交出控制权.这种模式使用 起来比较复杂,因为函数在没有运行完成就进行返回,会不断地返回 WSAEWOULDBLOCK错误.但功能强大.为了解决这个问题,提出了进行I/O操作的一些I/O模型,下面介绍最常见的三种: Windows Socket五种I/O模型——代码全攻

Tomcat全攻略

tomcat全攻略 1.tomcat是什么? Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,它早期的名称为catalina,后来由Apache.Sun 和其他一些公司及个人共同开发而成,并更名为Tomcat.Tomcat是应用(java)服务器,它是一个servlet容器,是Apache的扩展,但它是独立运行的.tomat应用于Java Servlet, JavaServer Pages,Java Expression Language以及其他的Javaweb开发的技术. Th

Android屏幕适配全攻略(最权威的官方适配指导)

Android屏幕适配全攻略(最权威的官方适配指导)

前台页面优化全攻略(三)

经过前两篇文章的实践,你的网站加载速度一定有了非常明显的变化.能把实践跟到这篇文章的人想必一定是极客中的极客.如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案. 你可以对网站进行快速的优化,但网站日常的节食却很难.也许你已经花了很大的力气去优化你的CSS和JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.所以看来不论是人还是网页,减肥都贵在坚持. 这篇终极减肥方案可能不适合所有的网站,但是我相信它可以引起你对网页大小的重视. 1

.Net常用技巧_VS2005[C#] 操作 Excel 全攻略(转)

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using Microsoft.Office.Interop.Excel; using System.Data.SqlClient; using System.Data.