28、js - axios的基本使用_javascript 使用axios-优快云博客

本文链接：https://blog.youkuaiyun.com/EchoLiner/article/details/131082783

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script>

        // axios的使用
        // 没写method配置项，默认是get请求
        // 执行完axios()方法得到的是promise对象，所以可以在axios()方法后面使用.then().catch()
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(res => {
            // 请求成功
            console.log(res);
        }).catch(error => {
            // 请求失败
            // 捕获异常
        })

        // 一、get请求
        // query查询数据（属于get请求）：需要params配置项，可以省略method配置项
        axios({
            // 浏览器控制台实际请求的url是这个：http://hmajax.itheima.net/api/city?pname=%E8%BE%BD%E5%AE%81%E7%9C%81
            url: 'http://hmajax.itheima.net/api/city',
            params: {
                pname: '辽宁省'
            }
        }).then(res => {
            console.log(res);
        })

        // 二、post请求
        // 请求数据（属于post请求）：1、需要data配置项，2、需要method配置项
        axios({
            url: 'http://hmajax.itheima.net/api/register',
            method: 'POST', // post大小写都可以
            data: {
                username: "hello1111",
                password: "123456"
            }
        }).then(res => {
            console.log(res);
        })

        // 三、delete请求
        // 删除数据（属于delete请求）：1、路径需要带上参数值（下面是带上参数id的值），2、需要method配置项
        const id = 1;
        axios({
            // 浏览器控制台实际请求的url是这个： http://hmajax.itheima.net/api/books/1
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'DELETE'
        }).then(res => {

        })

        // 四、put请求

    </script>
</body>

</html>