笔记--axios
程序员文章站
2022-03-23 22:13:24
get 无参请求get 有参请求
get 无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("http").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
get 有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("http", {params:{id:1}}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
post 无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.post("http").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
post 有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.post("http", "name=张三&age=18").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
</script>
axios并发 请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get("http"),
axios.get("http", {params:{id:1}})
]).then(
axios.spread((res1, res2)=>{
console.log(res1);
console.log(res2);
})
).catch(err=>{
console.log(err);
})
</script>
axios的全局配置
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> //配置全局属性
<script>
axios.defaults.baseURL="url";
axios.defaults.timeout=5000;
axios.get("xxx").then(res=>{ //再全局配置的基础上去网络请求
console.log(res);
})
axios.post("xxx").then(err1=>{
console.log(err1);
}).catch(err2=>{
console.log(err2);
})
</script>
axios的实例
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let newVar = axios.create({
baseURL:"url",
timeout:5000
}); //创建axios的实例
newVar({
url:"getxxx"
}).then(res=>{
console.log(res);
})
</script>
axios的拦截器
请求方向
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.interceptors.request.use(config=>{
console.log("进入请求拦截器");
console.log(config);
return config; // 放行请求
}),err=>{
console.log("请求方向失败");
console.log(err);
}
axios.get("url").then(ass=>{
console.log(ass);
})
</script>
响应方向
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.interceptors.response.use(config=>{
console.log("进入响应拦截器");
return config.data; // 放行响应
}),err=>{
console.log("响应方向失败");
console.log(err);
}
axios.get("url").then(ass=>{
console.log(ass);
})
</script>
封装到vue
// 封装位置
export function request(config){
let newVar = axios.create((
baseURL:"url",
timeout:5000
));
return newVar(config)
}
// 调用位置
import {request} from './上面封装的位置'
request({
url:"关键字"
}).then(res=>{
console.log(res);
})
本文地址:https://blog.csdn.net/hahahaha__init__/article/details/108710933
上一篇: axios封装使用