vue axios全攻略

之前vue对接数据方面，使用的是vue-resource,现在随着node.js的普及，大家开始用axios.

什么是axios呢？

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

---

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

引入方式：

1. $ npm install axios
2. $ cnpm install axios //taobao源
3. bower install axios
4. 或者使用cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

举个栗子：

执行 GET 请求(例子：向具有指定ID的用户发出请求)

axios.get('/user?ID=88')

.then(function(response){

console.log(response);

})

.catch(function(error){

console.log(error);

});

 

//也可以通过params对象传递参数

axios.get('/user',{

params:{

ID:88

}

})

.then(function(response){

console.log(response);

})

.catch(function(error){

console.log(error);

});

执行 POST 请求

axios.post('/user',{

firstName:'fred',

lastName:'flistone'

})

.then(function(response){

console.log(response)

})

.catch(function(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) {

//两个请求现已完成

}));

axios API

除此外，还可以通过类似jq ajax函数那样进行配置请求

axios(config)

// 发送一个 POST 请求

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

});

 

axios(url[, config])

/ /发送一个 GET 请求 (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]]）

注意
当使用别名方法时，不需要在config中指定url，method和data属性。

并发

帮助函数处理并发请求。

• axios.all（iterable）
• axios.spread（callback）

创建实例

您可以使用自定义配置创建axios的新实例。

axios.create（[config]）

var instance = axios.create({

baseURL: 'https://some-domain.com/api/',

timeout: 1000,

headers: {'X-Custom-Header': 'foobar'}

});

 

实例方法

可用的实例方法如下所示。 指定的配置将与实例配置合并。

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]]）

 

关于更多请求配置说明参见：

原文链接：https://www.cnblogs.com/libin-1/p/6607945.html

参考链接：https://www.kancloud.cn/yunye/axios/234845

参考链接：https://www.jianshu.com/p/df464b26ae58