首頁 > web前端 > js教程 > 最全的axios攻略

最全的axios攻略

小云云
發布: 2017-12-23 09:34:40
原創
2778 人瀏覽過

axios 是一個基於Promise 用於瀏覽器和nodejs 的HTTP 用戶端,本文就和大家分享最全的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(&#39;/user?ID=12345&#39;)

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

  

// 也可以通过 params 对象传递参数

axios.get(&#39;/user&#39;, {

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(&#39;/user&#39;, {

firstName: &#39;Fred&#39;,

lastName: &#39;Flintstone&#39;

})

.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(&#39;/user/12345&#39;);

}

  

function getUserPermissions() {

return axios.get(&#39;/user/12345/permissions&#39;);

}

  

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: &#39;post&#39;,

url: &#39;/user/12345&#39;,

data: {

firstName: &#39;Fred&#39;,

lastName: &#39;Flintstone&#39;

}

});

登入後複製

1

2

// 发送一个 GET 请求 (GET请求是默认请求模式)

axios(&#39;/user/12345&#39;);

登入後複製

axios(url[, config])

請求方法別名

為了方便起見,已經為所有支援的請求方法提供了別名。

  • 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: &#39;https://some-domain.com/api/&#39;,

timeout: 1000,

headers: {&#39;X-Custom-Header&#39;: &#39;foobar&#39;}

});

登入後複製

可用的實例方法如下所示。 指定的配置將與實例配置合併。 實例方法

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: &#39;/user&#39;,

  

// `method`是发出请求时使用的请求方法

method: &#39;get&#39;, // 默认

  

// `baseURL`将被添加到`url`前面,除非`url`是绝对的。

// 可以方便地为 axios 的实例设置`baseURL`,以便将相对 URL 传递给该实例的方法。

baseURL: &#39;https://some-domain.com/api/&#39;,

  

// `transformRequest`允许在请求数据发送到服务器之前对其进行更改

// 这只适用于请求方法&#39;PUT&#39;,&#39;POST&#39;和&#39;PATCH&#39;

// 数组中的最后一个函数必须返回一个字符串,一个 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: {&#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;},

  

// `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: &#39;brackets&#39;})

},

  

// `data`是要作为请求主体发送的数据

// 仅适用于请求方法“PUT”,“POST”和“PATCH”

// 当没有设置`transformRequest`时,必须是以下类型之一:

// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams

// - Browser only: FormData, File, Blob

// - Node only: Stream

data: {

firstName: &#39;Fred&#39;

},

  

// `timeout`指定请求超时之前的毫秒数。

// 如果请求的时间超过&#39;timeout&#39;,请求将被中止。

timeout: 1000,

  

// `withCredentials`指示是否跨站点访问控制请求

// should be made using credentials

withCredentials: false, // default

  

// `adapter&#39;允许自定义处理请求,这使得测试更容易。

// 返回一个promise并提供一个有效的响应(参见[response docs](#response-api))

adapter: function (config) {

/* ... */

},

  

// `auth&#39;表示应该使用 HTTP 基本认证,并提供凭据。

// 这将设置一个`Authorization&#39;头,覆盖任何现有的`Authorization&#39;自定义头,使用`headers`设置。

auth: {

username: &#39;janedoe&#39;,

password: &#39;s00pers3cret&#39;

},

  

// “responseType”表示服务器将响应的数据类型

// 包括 &#39;arraybuffer&#39;, &#39;blob&#39;, &#39;document&#39;, &#39;json&#39;, &#39;text&#39;, &#39;stream&#39;

responseType: &#39;json&#39;, // default

  

//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称

xsrfCookieName: &#39;XSRF-TOKEN&#39;, // default

  

// `xsrfHeaderName`是携带xsrf令牌值的http头的名称

xsrfHeaderName: &#39;X-XSRF-TOKEN&#39;, // 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 }),

  

// &#39;proxy&#39;定义代理服务器的主机名和端口

// `auth`表示HTTP Basic auth应该用于连接到代理,并提供credentials。

// 这将设置一个`Proxy-Authorization` header,覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。

proxy: {

host: &#39;127.0.0.1&#39;,

port: 9000,

auth: : {

username: &#39;mikeymike&#39;,

password: &#39;rapunz3l&#39;

}

},

  

// “cancelToken”指定可用于取消请求的取消令牌

// (see Cancellation section below for details)

cancelToken: new CancelToken(function (cancel) {

})

}

登入後複製

1

2

3

4

5

6

7

8

axios.get(&#39;/user/12345&#39;)

.then(function(response) {

console.log(response.data);

console.log(response.status);

console.log(response.statusText);

console.log(response.headers);

console.log(response.config);

});

登入後複製

配置預設值使用 then 時,您將收到以下回應:



您可以指定將套用於每個請求的設定預設值。

全域axios預設值

1

2

3

axios.defaults.baseURL = &#39;https://api.example.com&#39;;

axios.defaults.headers.common[&#39;Authorization&#39;] = AUTH_TOKEN;

axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;;

登入後複製

1

2

3

4

5

6

7

//在创建实例时设置配置默认值

var instance = axios.create({

   baseURL:&#39;https://api.example.com&#39;

});

  

//在实例创建后改变默认值

instance.defaults.headers.common [&#39;Authorization&#39;] = 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(&#39;/ longRequest&#39;,{

   timeout:5000

});

登入後複製

攔截器

你可以截取請求或回應在被then 或catch 處理之前

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//添加请求拦截器

axios.interceptors.request.usefunction(config){

     //在发送请求之前做某事

     return config;

   },function(error){

     //请求错误时做些事

     return Promise.reject(error);

   });

  

//添加响应拦截器

axios.interceptors.response.usefunction(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(&#39;/ user / 12345&#39;)

   .catchfunction(error){

     if(error.response){

       //请求已发出,但服务器使用状态代码进行响应

       //落在2xx的范围之外

       console.log(error.response.data);

       console.log(error.response.status);

       console.log(error.response.headers);

     } else {

       //在设置触发错误的请求时发生了错误

       console.log(&#39;Error&#39;,error.message);

     }}

     console.log(error.config);

   });

登入後複製

1

2

3

4

5

axios.get(&#39;/ user / 12345&#39;,{

   validateStatus:function(status){

     return status < 500; //仅当状态代码大于或等于500时拒绝

   }}

})

登入後複製

消除您可以使用validateStatus配置選項定義自訂HTTP狀態碼錯誤範圍。



您可以使用取消令牌取消請求。

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(&#39;/user/12345&#39;, {

cancelToken: source.token

}).catch(function(thrown) {

if (axios.isCancel(thrown)) {

console.log(&#39;Request canceled&#39;, thrown.message);

} else {

// 处理错误

}

});

  

//取消请求(消息参数是可选的)

source.cancel(&#39;操作被用户取消。&#39;);

登入後複製

1

2

3

4

5

6

7

8

9

10

11

12

var CancelToken = axios.CancelToken;

var cancel;

  

axios.get(&#39;/ user / 12345&#39;,{

   cancelToken:new CancelToken(function executor(c){

     //一个执行器函数接收一个取消函数作为参数

     cancel = c;

   })

});

  

// 取消请求

clear();

登入後複製

注意:您可以使用相同的取消令牌取消幾個請求。
您也可以透過將執行器函數傳遞給CancelToken建構子來建立取消令牌:

使用application / x-www-form-urlencoded格式

##預設情況下,axios將JavaScript物件序列化為JSON。 要以應用程式/ x-www-form-urlencoded格式發送數據,您可以使用以下選項之一。

浏览器

在浏览器中,您可以使用URLSearchParams API,如下所示:

1

2

3

4

var params = new URLSearchParams();

params.append(&#39;param1&#39;, &#39;value1&#39;);

params.append(&#39;param2&#39;, &#39;value2&#39;);

axios.post(&#39;/foo&#39;, params);

登入後複製


或者,您可以使用qs库对数据进行编码:
请注意,所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。

1

2

var qs = require(&#39;qs&#39;);

axios.post(&#39;/foo&#39;, qs.stringify({ &#39;bar&#39;: 123 });

登入後複製

在node.js中,可以使用querystring模块,如下所示:Node.js

1

2

var querystring = require(&#39;querystring&#39;);

axios.post(&#39;http://something.com/&#39;, querystring.stringify({ foo: &#39;bar&#39; });

登入後複製

Promise你也可以使用qs库。


axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises,您可以使用polyfill。

TypeScript


axios包括TypeScript定义。

1

2

import axios from &#39;axios&#39;;

axios.get(&#39;/user?ID=12345&#39;);

登入後複製

axios在很大程度上受到Angular提供的$http服务的启发。 最终,axios努力提供一个在Angular外使用的独立的$http-like服务。

学完本文相信大家对axios更加深入了解了吧,赶紧收藏起来吧。

相关推荐:

vue配置axios的方法步骤示例

关于VueJs 搭建Axios接口请求工具分析

浅谈axios中的get,post方法介绍

以上是最全的axios攻略的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板