一:请求方法
什么是请求方法:
浏览器对服务器资源,要执行的操作
常见请求方法如下
二:axios中应用
语法格式:
method:为请求方法,默认情况下为get(获取数据)
data:提交数据,参数名为后端程序员规定,值为前端通过技术获取
axios({
url:'目标资源地址',
method:'请求方法'
data:{
参数名:值
}
}).then((result)=>{
//对服务器返回的数据做后续处理
})
案例:
需求点击按钮,提交用户名和密码,查看返回值信息
说明:案例中获取以及提交数据使用的服务器itheima的,同时相应的接口文档如下注册账号 - AJAX阶段 (apifox.com)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">注册</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
axios({
url: 'https://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima0011',
password: '1234567'
}
}).then(reslut => {
console.log(reslut);
})
})
</script>
</body>
</html>
axios错误处理
在当前注册案例中,如果重复注册会出现报错信息。可以利用catch()方法获取axios报错信息,进而返回给用户
axios({
url: 'https://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima0011',
password: '1234567'
}
}).then(reslut => {
console.log(reslut);
}).catch(error => {
// console.log(error);
alert(error.response.data.message)
})