Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

安装Axios模块

在Vue中使用，最好安装两个模块axios 和vue-axios

$npm install axios vue-axios --save

然后引用并使用模块

import Axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios,Axios)

在组件中通过如下方式进行使用

this.$http[method]()

Axios模块特性

1、可以从浏览器中创建XHR对象

2、可以从nodeJS中创建HTTP请求

3、支持Promise API 

4、可以拦截请求和响应

5、可以转换请求数据和响应数据

6、可以取消请求

7、可以自动转换JSON数据

8、客户端支持防御XSRF

Vue下使用使用Axios

下面是一些简单的请求实例

get请求

仅仅向后端请求数据

axios.get('index.php') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

通过URL向后端发送数据，要使用params属性，params属性包含即将与请求一起发送的数据

运行下列代码后，请求URL变更为index.php?id=12345&text=%E5%B0%8F%E7%81%AB%E6%9F%B4

axios.get('index.php',{ params:{ id:12345, text:'jb51' }}).then((response)=>{ console.log(response)}).catch((error)=>{ console.log(error)})

当然，也可以把数据直接写到URL中

// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

post请求

一般来说，post请求更多的是要提交数据，params属性里的数据会出现在请求主体中

[注意]如果是axios.create()方法中的params属性，则其里面的数据会出现在URL参数中

但实际上，post方法不需要使用params属性，它的第二个参数就是要发送的数据

axios.post('index.php',{ id:12345, text:'jb51'}).then((response)=>{ console.log(response)}).catch((error)=>{ console.log(error)})

多并发请求

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) { // acct为第一个请求的结果，perms为第二个请求的结果 }));

Axios中的API

axios()

可以通过向 axios 传递相关配置来创建请求

axios(config)// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});axios(url[,config])// 发送 GET 请求（默认的方法）axios('/user/12345');

别名

为方便起见，为所有支持的请求方法提供了别名

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、method、data 这些属性都不必在配置中指定

并发

处理并发请求的助手函数

axios.all(iterable)axios.spread(callback)

实例方法

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])var instance = axios.create({ baseURL: 'https://mit('fnChangeList',{listData:response.data})}).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { console.log('err'); }});source.cancel('Operation canceled by the user.');

最终在控制台中打印出如下信息

Request canceled Operation canceled by the user.

更多关于VUE中使用HTTP库Axios的文章大家可以点击下面的相关链接