【ajax基础03】常用ajax请求方法和数据提交以及axios错误处理
一：请求方法
什么是请求方法：
浏览器对服务器资源，要执行的操作
常见请求方法如下
二：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)})