Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中,在服务端它使用原生 node.js http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
基本配置
1 2 3 4 5 6 7 8
| 使用 npm: npm install axios 使用 yarn: yarn add axios 使用 jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 使用 unpkg CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
基本使用
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
| const axios = require('axios');
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); })
axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); })
async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); } }
|
发起多个并发请求
1 2 3 4 5 6 7 8 9 10 11 12 13
| function getUserAccount() { return axios.get('/user/12345'); }
function getUserPermissions() { return axios.get('/user/12345/permissions'); }
Promise.all([getUserAccount(),getUserPermissions()]) .then(function (results) { const acct = results[0]; const perm = results[1]; });
|
API集合
为了方便起见,已经为所有支持的请求方法提供了别名
1 2 3 4 5 6 7 8
| axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
|
请求配置
这些是创建请求时可以用的配置选项。只有 url
是必需的。如果没有指定 method
,请求将默认使用 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
| { url: '/user', method: 'get', baseURL: 'https://some-domain.com/api/',
transformRequest: [function (data, headers) { return data; }],
transformResponse: [function (data) { return data; }],
headers: {'X-Requested-With': 'XMLHttpRequest'},
params: { ID: 12345 },
paramsSerializer: function (params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) },
data: { firstName: 'Fred' }, data: 'Country=Brasil&City=Belo Horizonte',
timeout: 1000,
withCredentials: false,
auth: { username: 'janedoe', password: 's00pers3cret' } }
|
响应结构
一个请求的响应包含以下信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| { data: {}, status: 200, statusText: 'OK', headers: {}, config: {}, request: {} }
|
当使用 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
| const instance = axios.create({ baseURL: 'https://api.example.com' });
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
参考资料