1.axios的get post delete put各类请求 配合json-server实现数据的post添加 put修改 get查询 delete删除
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>delete</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
const btn=document.querySelectorAll('button')
btn[0].onclick=function () {
axios({
method:'GET',
url:'http://localhost:3000/post',
}).then(response=>console.log(response.data))
}
btn[1].onclick=function () {
axios({//post请求添加一个post数据
method:'POST',
url:'http://localhost:3000/post',
data:{
title:"今天是9/14",
author:"xxx"
}
}).then(response=>console.log(response.data))
}
btn[2].onclick=function () {
axios({ //put请求修改数据id3的作者为李四
method:'PUT',
url:'http://localhost:3000/post/3',
data:{
title:"今天是9/14",
author:"李四"
}
}).then(response=>console.log(response.data))
}
btn[3].onclick=function () {
axios({//delete请求删除一个数据 id=1的数据
method:'DELETE',
url:'http://localhost:3000/post/1',
}).then(response=>console.log(response.data))
}
</script>
</body>2.axios对象 const axs=axios.create({默认配置})
axs.get...axs.post()....axs({
ajax请求})
3.拦截器
请求拦截器
axios.interceptors.request.use(function (confug) {
console.log('请求拦截器 成功')
//此处对发过去的axios请求的配置进行处理 例如 添加一个参数 config.params={a:200}
return confug
},function (error) {
console.log('请求拦截器 失败')
return Promise.reject(error)
})响应拦截器
axios.interceptors.response.use(function (confug) {
console.log('响应拦截器 成功')
//可以对返回的response进行处理
return confug
},function (error) {
console.log('响应拦截器 失败')
return Promise.reject(error)
})4.取消请求以及防抖
<button>发送请求</button>
<button>取消请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
const btn=document.querySelectorAll('button')
let cancel=null
btn[0].onclick=function(){
if (cancel) cancel()//防抖
axios({
method:'GET',
url:' http://localhost:3000/post',
cancelToken:new axios.CancelToken(function (c) {
cancel=c
})
}).then((response)=>{
cancel=null
})
}
btn[1].onclick=function () {
cancel() //取消请求
}
</script>
