vue axios全攻略

不再继续维护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.