Vue学习-axios
目录
功能特点
- 在浏览器中发送XMLHttpRequests请求
- 在node.js 中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
安装
npm install axios --save
请求方式
axios(config)
axios.request(config)
axios.get(url[,config])
import axios from 'axios'
//1.没有请求参数
axios.get('url')
.then(res=>{ console.log(res)})
.catch(err=>{console.log(err) })
//2.有请求参数
axios.get('url',{params:{type:'sell',page:1}})
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)});
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,config])
axios.put(url[,config])
axios.patch(url[,config])
axios.all()并发请求
axios.all([axios({url:'url'}),axios({url:'url'})])
.then(results=>{ //results是一个数组，results[0]是第一个回调的结果;results[1]是第二个回调的结果;
var result1=results[0]
var result2=results[1]
})
//axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开(spread)为res1,res2
axios.all([axios({url:'url'}),axios({url:'url'})])
.then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
拦截器
- 4个拦截（请求成功，请求失败，响应成功，响应失败）
const instance=axios.create({baseURL:'',timeout:5000});
instance.interceptors.request.use(config=>{
console.log('request 成功');
return config;
}
,err=>{
console.log('request 失败');
return err;
})
instance.interceptors.response.use(response=>{
console.log('response 成功');
return response.data;
}
,err=>{
console.log('response 失败');
return err;
})
