安装
先在当前项目安装axios
cnpm i axios -S
get请求
axios.get('http://localhost:8082/getAllStudents').then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
上面这个例子并没有带参数过去,如果需要携带参数可以有2种写法。
方法1
直接在请求的地址里,写上?key=value
axios.get('http://localhost:8082/getStudentsByName?name=marry').then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
方法2
axios.get('http://localhost:8082/getStudentsByName', {
params : {
name : 'tom'
}
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
post请求
post请求与get请求类似,不同的是,如果post请求需要携带参数过去给服务器,需要把参数转换成key=value&key=value这种形式。
axios.post('http://localhost:8082/getStudentsByName', qs.stringify({
name : 'tom'
})).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
这里的qs.stringify是笔者写的一个方法而已,代码如下 :
var qs = {
stringify(json){
Object.keys(json).forEach(key => {
!json[key] && delete json[key];
});
let queryStr = Object.keys(json)
.map(key => {
return `${key}=${json[key]}`;
}).join("&");
return queryStr;
}
}
该方法会把json对象转换成key=value&key=value这种形式。
并发请求
axios提供all方法,可以等待所有请求都完成后,统一处理。如 :
function getAllStudents(){
return axios.get('http://localhost:8082/getAllStudents');
}
function getStudentsByName(){
return axios.get('http://localhost:8082/getStudentsByName?name=marry');
}
axios.all([getAllStudents(), getStudentsByName()])
.then(function(res){
console.log(res);
});
这里的res返回的是一个数组
如果我们要对数据进行过操作,则需要res[0]、res[1]这样操作,不太方便。这里可以使用axios提供的spread方法,如下 :
function getAllStudents(){
return axios.get('http://localhost:8082/getAllStudents');
}
function getStudentsByName(){
return axios.get('http://localhost:8082/getStudentsByName?name=marry');
}
axios.all([getAllStudents(), getStudentsByName()])
.then(axios.spread(function(res1,res2){
console.log(res1);
console.log(res2);
}));
打印结果:
使用实例来请求
在一个项目中,请求的地址不可能都是同一个url,总会有一两个接口是别的域名。这时候我们可以创建单独的axios实例来为这个接口做请求。如 :
let newVar = axios.create({
baseURL : 'http://localhost:8082', //请求的ip
timeout : 5000 //超时时间设置
});
newVar({
url : 'getAllStudents'
}).then(res=>{
console.log(res);
});
调用create方法来创建一个实例
全局配置
我们上面的例子,在请求一个ip的时候,都需要写全 :
下面通过axios的全局配置,来达到不需要写全。代码 :
axios.defaults.baseURL = 'http://localhost:8082'; //设置请求的ip
axios.defaults.timeout = 5000; //设置请求超时时间
axios.get('/getAllStudents').then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
axios的全局配置还不止这2个,更多全局配置请查看官方文档。
拦截器
axios提供的拦截器有2个,一个是请求之前,一个是请求之后。例子 :
比如我们上面的post请求,我们需要用qs.stringify来转换数据,一个项目大大小小可能会有上百个请求,哪天axios更新了,可以使用json来传递数据给服务器,这时我们需要修改的话就太浪费时间了。
所以我们可以在请求之前,判断这个请求是不是post请求,如果是,则把他的json数据转换成key=value的这种形式。这个判断可以写在axios的拦截器的请求之前。如下 :
//添加请求拦截器
axios.interceptors.request.use(function (config) {
//判断请求是不是post请求
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
return Promise.reject(error);
});
//添加响应拦截器
axios.interceptors.response.use(function (response) {
console.log(response);
return response;
}, function (error) {
return Promise.reject(error);
});
axios.post('http://localhost:8082/getStudentsByName2', { //这里直接传入json即可
name : 'tom'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
其中,axios.interceptors.request.use里面的config,打印出来是这么一个内容 :
而axios.interceptors.response.use的response是这么一个内容 :
实际上就是和我们接受到服务器返回来的数据是同一个东西。所以拦截器的作用实际上就是请求前,我们可以提前对数据进行一些操作,请求后我们也可以对返回的数据进行统一的判断。例如状态码,你一定这么写过 :
if(res.status == 1004){
alert('服务器繁忙,请喝杯茶休息一会儿');
}else if(res.status == 1005){
alert('网络错误');
}
//都没错了,在进行下面的代码处理
如果每个请求都需要重新写一遍,那不累死。所以这个判断可以放在axios.interceptors.response.use去判断。
如 :
axios.interceptors.response.use(function (response) {
if(response.status == 1004){
alert('服务器繁忙,请喝杯茶休息一会儿');
break;
}else if(response.status == 1005){
alert('网络错误');
break;
}
return response;
}, function (error) {
return Promise.reject(error);
});
本文地址:/QQ408896436/article/details/10732
希望与广大网友互动??
点此进行留言吧!
如果觉得《axios获取发起请求的地址 vue_axios安装 发送地址请求实例》对你有帮助,请点赞、收藏,并留下你的观点哦!