axios 入门

请忽略大图,不只是Vue,其他js均可用

001
001

Editor: Yangfan 2017-08-17

Intro: 本文档参考axios的官方文档和网上的axios使用教程所写,后续还会不断完善,鄙人水平有限,还望批评指正


强烈建议查看完整文档,链接如下

英文原文档: https://github.com/mzabriskie/axios

中文文档:
https://www.awesomes.cn/repo/mzabriskie/axios
https://segmentfault.com/a/1190000008470355


什么是axios

引用axios的介绍:

Promise based HTTP client for the browser and node.js

axios是一个基于ES6的Promise的网络请求库,是一个ajax库。

可以实现:

  • 在浏览器里建立XHR

  • 通过nodejs进行http请求

甚至可以实现:

  • 转换或者拦截请求数据或响应数据

  • 支持Promise的API

  • 可以取消请求

  • 自动转换JSON

  • 可以防御XSRF攻击!

浏览器支持也没什么问题,IE这种本时代异端都能支持到8+,这问题是不大了。(VUE支持到9+!)

Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE
Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 8+ ✔

[

Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)
Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)

怎么用

方法一 npm安装

  1. npm下载
1
npm install axios
  1. webpack之类的打包工具导入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import axios from 'axios'

// or

var axios=require('axios');



//===============Vue===================
// Vue全局引用及使用

import axios from 'axios'
Vue.prototype.$http = axios

this.$http.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

方法二 script标签引入

1
2

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用法及DEMO

简单的demo

一个简单的HTTP 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

// 法一 请求参数写到url中

axios.get('http://getRes.php?id=123456&name=Yangfan').then(function (response) {
// TODO
 // 返回HTTP请求成功的数据
}).catch(function (error) {
// TODO
 // 返回HTTP请求失败的失败信息
});

// 法二 请求参数写到axios配置参数中

axios.get('http://getRes.php',{
 params:{
id:123456,
name:"Yangfan"
}
}).then(function (response) {
// TODO
 // 返回HTTP请求成功的数据
}).catch(function (error) {
// TODO
 // 返回HTTP请求失败的失败信息
});

一个简单的HTTP POST 请求

1
2
3
4
5
6
7
8
9
10
11

axios.post('http://getRes.php',{
id:123456,
name:"Yangfan"
}).then(function (response) {
// TODO
 // 返回HTTP请求成功的数据
}).catch(function (error) {
// TODO
 // 返回HTTP请求失败的失败信息
});

自定义请求配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 配置
var config={
 method: 'GET', // 请求方法                                          
 url: 'http://getRes.php',  // 请求url
 headers: {
   token: 'ftv1443qby6bdfa41t90sfvq89hg3h54u989m9imog79g4'   // 请求头
},
 data: {         // 需要传递的数据                                 
id: 123456,
name: 'Yangfan'
}
};

axios(config).then(function (response) {
// TODO
 // 返回HTTP请求成功的数据
}).catch(function (error) {
// TODO
 // 返回HTTP请求失败的失败信息
});

完整配置








































































































































参数 类型 注解
url String url是服务器链接,用来请求
method String method是发起请求时的请求方法
baseURL String baseURL如果url不是绝对地址,那么将会加在其前面。
transformRequest Function transformRequest允许请求的数据在传到服务器之前进行转化。
transformResponse Function transformResponse允许返回的数据传入then/catch之前进行处理
headers Object headers是自定义的要被发送的头信息
params Object params是请求连接中的请求参数,必须是一个纯对象,或者URLSearchParams对象
paramsSerializer Function paramsSerializer是一个可选的函数,是用来序列化参数
data Object data是请求提需要设置的数据

只适用于应用的’PUT’,’POST’,’PATCH’,请求方法

当没有设置transformRequest时,必须是以下其中之一的类型(不可重复?):

-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams

-仅浏览器:FormData,File,Blob

-仅Node:Stream
timeout Number timeout定义请求的时间,单位是毫秒。
withCredentials Boolean withCredentials表明是否跨网站访问协议,
adapter Function adapter适配器,允许自定义处理请求,这会使测试更简单。
auth Object auth表明HTTP基础的认证应该被使用,并且提供证书。

这个会设置一个authorization 头(header),并且覆盖你在header设置的Authorization头信息。
responseType String responsetype表明服务器返回的数据类型,这些类型的设置应该是

‘arraybuffer’,’blob’,’document’,’json’,’text’,stream’
xsrfCookieName String xsrfCookieName是cookie名,用作xsrf token值
xsrfHeaderName String xsrfHeaderName 是http头(header)的名字,并且该头携带xsrf的值
onUploadProgress Function onUploadProgress允许处理上传过程的事件
onDownloadProgress Function onDownloadProgress允许处理下载过程的事件
maxContentLength Number maxContentLength 定义http返回内容的最大容量
validateStatus Function validateStatus 定义promise的resolve和reject。

http返回状态码,如果validateStatus返回true(或者设置成null/undefined),promise将会接受;其他的promise将会拒绝。
maxRedirects Number maxRedirects定义了node.js中要重定向的最大数量。

如果设置为0,则不会重定向。
httpAgent Object httpAgenthttpsAgent当产生一个http或者https请求时分别定义一个自定义的代理,在nodejs中。

这个允许设置一些选选个,像是keepAlive–这个在默认中是没有开启的。
httpsAgent Object httpAgenthttpsAgent当产生一个http或者https请求时分别定义一个自定义的代理,在nodejs中。

这个允许设置一些选选个,像是keepAlive–这个在默认中是没有开启的。
proxy Object proxy定义服务器的主机名字和端口号。

auth表明HTTP基本认证应该跟proxy相连接,并且提供证书。

这个将设置一个’Proxy-Authorization’头(header),覆盖原先自定义的。
cancelToken Function cancelTaken 定义一个取消,能够用来取消请求

返回结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
 // 服务器返回的数据                                        
 data: {},

 // 服务器返回的状态码                              
 status: 200,

 // 服务器返回的状态信息                                                                     
statusText: 'OK',

 // 服务器返回的响应头信息                      
 headers: {},

 // `config`是提供给`axios`的请求的配置
config: {}
}