axios

原创已于 2022-05-18 16:16:06 修改 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

于 2022-03-26 23:00:20 首次发布

ajax 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了Axios库的使用方法，包括GET和POST请求的发起方式，并提供了详细的示例代码。Axios是一种轻量级的网络请求库，相比原生XMLHttpRequest更易于使用。

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象,axios简单易用

相比于jQuery,axios更加轻量化,只专注于网络数据请求

axios发起GET请求

axios发起get请求的语法:

axios.get('url', {params: { /*参数*/ } }).then(callback)

具体的请求示例如下:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="../../js/axios.js"></script>
</head>

<body>
    <button id="btn">发起GET请求</button>

    <script>
        document.querySelector('#btn').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/get';
            var paramsObj = {
                name: 'zs',
                age: 20
            }
            axios.get(url, {
                paramsObj
            }).then(function(res) {
                console.log(res); //是axios包装的数据
                console.log(res.data); //服务器提供的数据
            })
        })
    </script>
</body>

</html>

axios发起POST请求

axios发起post请求的语法:

axios.post('url', {params: { /*参数*/ } }).then(callback)

具体的请求示例如下:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="../../js/axios.js"></script>
</head>

<body>
    <button id="btn">发起POST请求</button>

    <script>
        document.querySelector('#btn').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/post';
            var dataObj = {
                address: '北京',
                location: 'aaa'
            };
            axios.post(url, dataObj).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>

</html>

直接使用axios发起请求

axios也提供了类似于jQuery中的$.ajax的函数,语法如下:

axios({
    method: '请求类型',
    url: '请求的url地址',
    data: { /*POST数据*/ },
    params: { /*GET参数*/ }
}).then(callback)

具体的请求示例如下:

GET请求

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="../../js/axios.js"></script>
</head>

<body>
    <button id="btn">使用axios发起GET请求</button>

    <script>
        document.querySelector('#btn').addEventListener('click', function() {
            axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/get',
                // data: { /*POST数据*/ },
                params: {
                    name: 'zs',
                    age: 20
                }
            }).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>

</html>

POST请求

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="../../js/axios.js"></script>
</head>

<body>
    <button id="btn">使用axios发起POST请求</button>

    <script>
        document.querySelector('#btn').addEventListener('click', function() {
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    bookname: '西游记',
                    price: 666
                },
                // params: {
                //     name: 'zs',
                //     age: 20
                // }
            }).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>

</html>