axios总结 异步请求骚操作
概述三方调用方式js库,基于promise,强力max。基本用法axios.get(url).then(ret =>{console.log(ret.data);//data属性固定写法})常用APIPOST / GET / PUT / DELETE一、GET//url传递参数axios.get('***?id=123').then(ret => {console.log(ret.da
·
概述
三方调用方式js库,基于promise,强力max。
基本用法
axios.get(url).then(ret =>{
console.log(ret.data);//data属性固定写法
})
常用API
POST / GET / PUT / DELETE
一、GET
//url传递参数
axios.get('***?id=123').then(ret => {
console.log(ret.data);
})
//restful方式传参,一系列传参方式改变,后台都需要改动
axios.get('***/123').then(ret => {
console.log(ret.data);
})
//params方式
axios.get('***',{
params:{
id:'123'
}
}).then(ret => {
console.log(ret.data);
})
二、POST
默认传递json格式
//通过选项传递参数
axios.post('***',{
name:'abc',
pwd:'123'
}).then(ret => {
console.log(ret.data);
})
//通过urlSearchParams传递参数
//(application/x-www-form-urlencoded)
const params = new urlSearchParams();
params.append('name','abc');
params.append('pwd','123');
axios.post(url,params).then(ret => {
console.log(ret.data);
})
其他两个delete\put不说了,跟get\post类似,百度吧。。。敲不动了
响应结果
主要属性:
data 实际响应返回数据
headers 响应头信息
status 响应状态码
statusText 响应状态信息
axios.post(url).then(ret => {
console.log(ret);
})
打印如下:
全局配置
超时时间
axios.defaults.timeout = 3000 ;
默认地址
axios.defaults.baseURL = ‘******’;
axios.defaults.baseURL = ' http://localhost:8888';
axios.get('axios-url').then(ret => {//url前面的省略
console.log(ret);
})
设置请求头
axios.defaults.headers[‘mytoken’] = ‘******’;
//跨域的请求头需要后台配置
axios.defaults.headers['mytoken'] = 'helloworld';
axios.get(url).then(ret => {
console.log(ret);
})
axios拦截
一、请求拦截器
aioxs----->拦截器----->服务器
//添加请求拦截器
axios.interceptors.request.use(function(config){
console.log(config.url)
//在请求发出之前进行一些信息配置
config.headers.mytoken = 'hellokugou'
return config;
},function(error){
//处理相应错误信息
})
axios.get(url).then(function(data){
console.log(data);
})
二、响应拦截器
axios<-----拦截器<-----服务器
数据返回之前进行加工处理
//添加请求拦截器
axios.interceptors.respons.use(function(res){
console.log(res)
var data = res.data;//把数据处理了一下
return data;
},function(error){
//处理相应错误信息
})
axios.get(url).then(function(data){
console.log(data);//不需要再通过.data获取数据,可以直接取到
})
更多推荐
已为社区贡献1条内容
所有评论(0)