1.什么是axios?
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。 Axios主要用于想后台发起请求,还有在请求中做更多可控功能。
2.特性
- 从浏览器中创建XMLHttpRequest
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和相应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
3.安装
使用npm (其他方式请看官网)
npm install axios
4.案例
执行get请求
//为给定ID的user创建请求
//写法1
axios.get('/user?ID=1234')
.then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
})
//写法2
axios.get('/user',{params:{ID:123}})
.then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
})
执行post请求
axios.post('/user',{firstName:'aa',lastName:'bb'})
.then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
})
执行多个并发请求
function getUserAccount(){
return axios.get('/user/123')
}
function getUserPermissions(){
return axios.get('/user/123/Permissions')
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//两个请求现在都执行完成
})
).catch(function(error){
console.log(error)
})
5 axios API
可以通过想 axios传递相关配置来创建请求
axios(config)
//发送post请求
axios({
method:'post',
url:'/user/123',
data:{
firstName:'aa',
lastName:'bb'
}
})
// 获取远端图片
axios({
method:'get',
url:'http://bit.ly/3sdfs',
responseType:'stream',
})
.then(function(response){
response.data.pipe(fs.createWriteStream('ada_loveace.jpg'))
})
axios(url[,config])
axios('/user/12234')
6.创建实例 拦截器
创建实例 可以使用自定义配置新建一个axios实例 axios.create([config])
const instance=axios.create({
baseURL:'https://some-domain.com/api',
timeout:1000,
headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
})
拦截器 在请求或响应被then或者catch处理前拦截它们
//添加请求拦截器
instance.interceptors.request.use(function(config){
//在发送请求之前做什么
return config;
},function(error){
//对请求错误做些什么
return Promise.reject(error)
})
//添加响应拦截器
instance.interceptors.reponse.use(function(response){
//对响应数据做点什么
return response ;
},function(error){
// 对响应错误做点什么
return Promise.reject(error)
}
)
拦截器流程:

axios官网:www.axios-js.com/zh-cn/docs/