【ajax基础03】常用ajax请求方法和数据提交以及axios错误处理

一：请求方法

什么是请求方法：

常见请求方法如下

二：axios中应用

语法格式：

案例：

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)
            })