1.dsfdsdfs

什么是axios
1.基本promise的异步ajax请求库
2.浏览器端/node端都可以使用
3.支持请求／响应拦截器
4.支持请求取消
5.请求/响应数据转换
6.批量发送多个请求

1.使用axios发送ajax请求
1.需要先下载axios文件或者添加在线地址

发送get请求不携带参数

  //获取所有人的信息 get请求 不携带参数
         btn1.onclick = ()=>{
              //完整版
              axios({
               //该地址为本地服务器地址
                url:'http://localhost:5000/persons',
                method:'GET'
            }).then(
                response =>{console.log('成功了',response.data);},
                error => {console.log('失败了',error);}
            )
            //精简版
           /*  axios.get('http://localhost:5000/persons').then(
                resopnse =>{console.log('成功了',resopnse);},
                Error =>{console.log('失败了',Error);}
            ) */
           
         }

发送get请求携带query参数(如果需要携带params参数需要写在地址上)

btn2.onclick= ()=>{
//完整版
axios(
{
url:'http://localhost:5000/person',
method:'GET',
params:{id:user_id.value}//此处写的是paiams 携带的是query参数
}
).then(
response =>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
//精简版
/* axios.get('http://localhost:5000/person',{params:{id:user_id.value}})
.then(
response =>{console.log('成功了',response.data);},
Error =>{console.log('失败了',Error);}
) */
}

发送post请求携带请求体参数
//增加一个人的信息 post请求携带请求体参数
btn3.onclick= ()=>{
//完整版
/* axios(
{
url:'http://localhost:5000/person',
method:'POST',
// data:{name:person_name.value,age:person_age.value}//json编码
data:`name=${person_name.value}&age=${person_age.value}`//urlencoed编码
}
).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
) */
//精简版
axios.post('http://localhost:5000/person',`name=${person_name.value}&age=${person_age.value}`).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
}

发送put请求更新一个人的信息
//更新一个人的信息 put请求携带请求体参数
btn4.onclick = ()=>{
/* axios({
url:'http://localhost:5000/person',
method:'PUT',
data:{id:updataId.value,name:updataName.value,age:updataAge.value}
}).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
) */
axios.put(
'http://localhost:5000/person',
{id:updataId.value,name:updataName.value,age:updataAge.value}
).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
}

发送delete请求删除一个人的信息
//删除一个人的信息 delete请求携带paiams参数
btn5.onclick = ()=>{
axios({
url:`http://localhost:5000/person/${deleteId.value}`,
method:'DELETE'
}).then(
response => {console.log('成功了',response.data);},
error => {console.log('失败了',error);}
)
}

2.axios的常用配置项
//给axios设置默认属性
axios.defaults.timeout=2000;
axios.defaults.headers = {shchool:'atguigu'};
axios.defaults.baseURL = 'http://localhost:5000'
btn1.onclick= ()=>{
axios({
url:'/test1',
method:'GET',
// params:{delay:3000},//设置延时时间
// timeout:2000,//设置响应时限
data:{name:1,age:12},//请求体参数(json编码)
//data:'name=1&age=3'//请求体参数(urlencode编码)
// headers:{shchool:'atguigu'},//设置请求头
responseType:'json'//设置响应数据的格式(默认)
}).then(
response=>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
}

3.axios的create方法
1.根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
2.新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
3.为什么要设计这个语法?
(1)需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
(2)解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

//创建另一个axios2,必须写在axios上面
const axios2 = axios.create(
{
timeout:3000,
baseURL:'https://api.apiopen.top'
}
);

//给axios设置默认属性
axios.defaults.timeout=2000;
axios.defaults.headers = {shchool:'atguigu'};
axios.defaults.baseURL = 'http://localhost:5000'

btn1.onclick= ()=>{
axios({
url:'/test1',
method:'GET',
// params:{delay:3000},//设置延时时间
// timeout:2000,//设置响应时限
data:{name:1,age:12},//请求体参数(json编码)
//data:'name=1&age=3'//请求体参数(urlencode编码)
// headers:{shchool:'atguigu'},//设置请求头
responseType:'json'//设置响应数据的格式(默认)
}).then(
response=>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
}
//点击获取笑话
btn2.onclick = ()=>{
axios2({
url:'/getJoke',
method:'GET'
}).then(
response=>{console.log('成功了',response.data);},
error =>{console.log('失败了',error);}
)
}

4.axios的拦截器
1.说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
2.流程: 请求拦截器=> 发ajax请求 => 响应拦截器 =>请求的回调

//请求拦截器
axios.interceptors.request.use((config) => {
if (Date.now() % 2 === 0) {
config.headers.school = "atguiug";
}

//必须写return config
return config;
});
//响应拦截器
axios.interceptors.response.use(
(response) => {
if (Date.now() % 2 === 0) {
console.log("响应拦截器成功的回调执行");
return response.data;
} else return "时间戳不是偶数";
},
(error) => {
console.log("响应拦截器失败的回调执行");
// 返回一个处于pending状态的promise实例那么then函数就不需要写失败的回调
return new Promise(() => {});
}
);
btn.onclick = async () => {
const result = await axios.get("http://localhost:5000/persons");
console.log(result);
};

5.axios取消发送
1.基本流程
①配置cancelToken对象
②缓存用于取消请求的cancel函数
③在后面特定时机调用cancel函数取消请求
④在错误回调中判断如果error是cancel, 做相应处理
2.实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求

const {CancelToken,isCancel} = axios;//声明一个canceltoken
let cancel
btn1.onclick = async()=>{
if(cancel) cancel()
axios({
url:'http://localhost:5000/test1?delay=3000',
method:'GET',
cancelToken:new CancelToken((c)=>{
cancel = c;
})
}).then(

response =>{console.log('成功了',response.data);},
error =>{
if(isCancel(error)){
console.log(error);
console.log('用户取消请求',error.message);
}
else console.log('失败了',error);

}
)
}
btn2.onclick=()=>{
cancel('任性不要了');
}

6.拦截器与取消发送配合使用
<script type="text/javascript">
const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
const { CancelToken, isCancel } = axios; //声明一个canceltoken
let cancel;
//请求拦截器与cancel配合使用
axios.interceptors.request.use((config) => {
if (cancel) cancel("取消了");
config.cancelToken = new CancelToken((c) => {
cancel = c;
});
return config;
});
//添加响应拦截器
axios.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
if (isCancel(error)) {
console.log("用户取消请求", error.message);
} else {
console.log("失败了", error);
}
//如果请求失败无论是自己取消请求还是路径问题都设置停止程序
return new Promise(() => {});
}
);
btn1.onclick = async () => {
const result = await axios.get(
"http://localhost:5000/test1?delay=3000"
);
console.log("@@", result);
};
btn2.onclick = () => {
cancel("任性不要了");
};
</script>

6.批量发送
<script type="text/javascript" >
const btn = document.querySelector('#btn1');
btn.onclick = ()=>{
//调用all方法
axios.all(
[
axios.get('http://localhost:5000/test1'),
axios.get('http://localhost:5000/test2?delay=3000'),
axios.get('http://localhost:5000/test3')
]
).then(
response => {console.log(response);},
error => {console.log(error);}
)
}

</script>

posted @ 2022-08-14 11:06 随遇而安== 阅读(37) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

root@su

1.dsfdsdfs

公告