一、axios 简介
1.axios特征
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
-
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
2.引入方式：
//使用npm $ npm install axios //使用bower $ bower install axios //或者使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，但是 axios并不是vue插件，所以不能 使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。
为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。
//main.js
import axios from ‘axios‘
Vue.prototype.$http = axios
3使用 $http命令
在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令
methods: { postData () { this.$http({ method: ‘post‘, url: ‘/user‘, data: { name: ‘xiaoming‘, info: ‘12‘ } }) }
二、下面来介绍axios的具体使用：
1.执行 GET 请求
// 向具有指定ID的用户发出请求 $http.get(‘/user?ID=12345‘) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 $http.get(‘/user‘, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
2.执行 POST 请求
$http.post(‘/user‘, { firstName: ‘Fred‘, lastName: ‘Flintstone‘ }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
3.执行多个并发请求
function getUserAccount() { return $http.get(‘/user/12345‘); } function getUserPermissions() { return $http.get(‘/user/12345/permissions‘); } axios.all([getUserAccount(), getUserPermissions()]) .then($http.spread(function (acct, perms) { //两个请求现已完成 }));
参照官网：http://www.axios-js.com/docs/