axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
1.将axios 挂载在vue原型上,使全局可以使用
Vue.prototype.$axios = axios
2.定义基础路径
this.$axios.defaults.baseURL = '127.0.0.1:3000/'
3. 发送get请求
this.$axios.get('index').then(res => {
//请求的数据存储在res.data 中
})
4.post请求
this.$axios.post('login',{user:123,pwd:123}).then(res => {
//请求的数据存储在res.data 中
})
5.多并发请求
var r1 = this.$axios.get('index')
var r2 = this.$axios.post('login',{user:123,pwd:123})
this.$axios.all([r1,r2]).then(this.$axios.spread(r1,r2) => {
//两个请求的结果在r1和r2中
})
6.使用自定义配置创建一个axios实例
var instance = axios.create({
baseURL:'127.0.0.1:3000',
timeout:1000 //请求超时1秒,
header:{'xxxxxxxxxxxx'} //请求头配置
})
7.axios 发送get请求响应数据前的修改
this.$axios.get('index',{
params:{id:1},
transfromResponse:[function(data) {
//console.log(data) 显示的时json字符串格式的数据
JSON.parse(data) //将json数据序列化
data.msg = 'xxx' //修改数据
}]
}).then(res => {
console.log(res.data.msg) //显示xxx
})
8.axios 发送post,put,patch请求发送数据前的修改
transformRequest 可以在向服务器发送请求之前 修改请求数据
后面的数组函数必须返回一个字符串或ArrayBuffer或Stream
this.$axios.post('login','a=xxx',{
transformRequest[function() {
return 'a=123' //这样发送请求的数据就被修改了
//如果是对象数据的话,需要使用qs模块进行转化
}]
}).then(res => {
//请求的数据存储在res.data 中
})