有关axios的内容总结
axios特点
①基本promise的异步ajax请求库
②浏览器端/node端都可以使用
③支持请求/响应拦截器(函数)
④支持请求取消
⑤请求/响应数据转换
⑥批量发送多个请求
axios常用语法
axios(config) == axios.request(url[,config])
axios(url[,config])
axios.get(url[,config])
axios.post(url[,config])
axios.delete(url[,config])
axios.put(url[,config])
axios.defaults.xxx 请求默认全局配置
axios.interceptors.request.use() 添加请求拦截器
axios.interceptors.response.use() 添加响应拦截器
axios.create([config]) 创建一个新的axios
axios.all(promises):用于批量执行多个异步请求
axios.spread() 用来指定接收所有成功数据的回调函数的方法
Axios引入与请求
<!-- 引入或者用npm -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
function get(){
//axios.get('http://localhost:3000/post?id=1')
axios({
url:'/posts',
param:{
id:1
}
})
.then(response => {
console.log('/posts get',response.data)
})
.catch(error => {
console.log('error',error.message)
})
}
function post(){
// axios.post('http://localhost:3000/post',{"title":"json-server3"})
axios({
url:'/post',
methoda;'post',
data:{"title":"json-server3"}
})
.then(response => {
console.log('/posts post',response.data)
})
}
function put(){ //更新
// axios.put('http://localhost:3000/post/3',{"title":"json-server3"})
axios({
url:'/post',
methoda;'post',
data:{"title":"json-server3"}
})
.then(response => {
console.log('/posts post',response.data)
})
}
function delete(){ //更新
// axios.delete('http://localhost:3000/post/3')
axios({
url:'/post/5',
methoda;'delete',
})
.then(response => {
console.log('/posts post',response.data)
})
}
axios create(config)
根据指定配置创建一个新的axios,也就是每个新axios都有自己的配置
新axios知识没有取消请求和批量发请求的方法,其他所有的语法都是一致的。
为什么要设计这个语法?项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,创建2个新axios,每个都有自己的配置,分别应用到不同要求的接口中
const instance = axios.create({
baseURL:'http://localhost:3000'
})
//使用Instance作为函数发请求发送请求
instance({
url:'/xxx',
method:'post'
})
//使用Instance作为对象发请求发送请求
instance.get('/xxx');
拦截器及运行流程
//添加请求拦截器(回调函数)
axios.interceptors.request.use(
config =>{
console.log('request interceptors1 onResolved()')
return config //必须返回config
},
error =>{
console.log('request interceptors1 onRejected()');
return Promise.reject(error);
})
//添加响应拦截器
axios.interceptors.response.use(
response =>{
console.log('response interceptors2 onResolved()')
return response
},
function(error){
console.log('response interceptors2 onRejected()');
return Promise.reject(error);
})
请求拦截器是在发请求之前执行,响应拦截器也是在.then()之前进行相应。
请求拦截器是后添加先执行,响应拦截器是先添加先执行。
请求拦截器必须return config 如果不写的话串联后面的操作只能得到undefined 到最后会catch error
同理响应拦截器
取消请求
点击取消当前请求
//发送请求之后cancel是null还是函数
let cancel;
function get1(){
axios({
url:'/xxx',
cancelToken:new axios.cancelToken((c)=>{ //c是用于取消当前请求的函数
//保存取消的函数,用于之后可能需要取消当前请求
cancel = c;
})
})
.then(
response =>{
cancel = null;
console.log('请求成功了');
},
error =>{
cancel = null;
console.log(error.message);
}
)
}
//点击取消请求按钮之后判断cancel是否为Null
function cencelReq(){
if (typeof cancel === 'function'){
cancel('强制取消请求');
}else{
console.log('没有可以取消的请求');
}
}
上一篇: 5万元投入在农村创业,能做哪些收入比较稳定的项目?推荐这几个
下一篇: 有关css的小效果