一.基于promise的HTTP的库
在浏览器(基于axios发送AJAX请求) 在node.js环境中运行(发送http请求)
支持promise API
ajax是对原生XHR封装 jQuery将技术进行封装 变为ajax promise又把ajax封装成axios
二.基本使用
const btns=document.querySelectorAll('button')
btns[0].onclick=function(){
axios({
method:'GET',
url:'http://localhost:3000/posts/2',
}).then((response)=>{
console.log(response)
})
}
//往db.json里面添加数据
btns[1].onclick=function(){
axios({
method:'POST',
url:'http://localhost:3000/posts',//这里没有具体id
//请求体
data:{
title:'天气'
}
}).then((response)=>{
console.log(response)
})
}
//更新数据
btns[2].onclick=function(){
axios({
method:'PUT',
url:'http://localhost:3000/posts/3',
data:{
title:'季节'
}
}).then((response)=>{
console.log(response)
})
}
//删除数据
btns[3].onclick=function(){
axios({
method:'DELETE',
url:'http://localhost:3000/posts/6'
})
}
三.默认配置
const btns=document.querySelectorAll('button')
//默认配置
axios.defaults.method='GET'
axios.defaults.baseURL='http://localhost:3000'
axios.defaults.params={id:100}//url参数
axios.defaults.timeout=3000 //三秒钟结果未返回取消请求
btns[0].onclick=function(){
axios({
url:'posts',
}).then((response)=>{
console.log(response)
})
}
四.创建实例对象
//应用场景:需要向两个服务器请求 比较方便
const real=axios.create({
baseURL:'http://localhost:3000',
timeout:2000
})
real({
url:'/posts'
}).then((response)=>{
console.log(response)
})
const real1=axios.create({
baseURL:'http://localhost:8000',
timeout:2000
})
real1({
url:'/posts'
}).then((response)=>{
console.log(response)
})
五.拦截器
axios.interceptors.request.use(function(config){
console.log('请求拦截器-1号 成功')
return config
},function(error){
console.log('请求拦截器-1号 失败')
return Promise.reject(error)
})
axios.interceptors.request.use(function(config){
console.log('请求拦截器-2号 成功')
return config
},function(error){
console.log('请求拦截器-2号 失败')
return Promise.reject(error)
})
//响应拦截器
axios.interceptors.response.use(function(response){
console.log('响应拦截器-1号 成功')
return response
},function(error){
console.log('响应拦截器-1号 失败')
return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
console.log('响应拦截器-2号 成功')
return response
},function(error){
console.log('响应拦截器-2号 失败')
return Promise.reject(error)
})
//输出结果是请求 2 1 响应 1 2
axios({
method:'GET',
url:'http://localhost:3000/posts'
}).then((response)=>{
console.log(response)
})
六.取消请求
const btns=document.querySelectorAll('button')
let cancel=null
btns[0].onclick=function(){
axios({
method:'GET',
url:'http://localhost:3000/posts',
//添加属性
cancelToken:new axios.CancelToken(function(c){
cancel=c
})
}).then(response=>{
console.log(response)
})
}
btns[1].onclick=function(){
cancel()
}