Axios

最新推荐文章于 2024-09-05 09:07:36 发布

hcoke

最新推荐文章于 2024-09-05 09:07:36 发布

阅读量374

点赞数

分类专栏：学习笔记 ajax 文章标签： ajax

本文链接：https://blog.csdn.net/m0_62962469/article/details/124307907

版权

学习笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

ajax

15 篇文章 0 订阅

订阅专栏

什么是Axios：

Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象，Axios简单易用。

相比于jquery，Axios更加轻量化，只专注于网络数据请求。

Axios发起get请求的语法：

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

具体的请求实例如下：

<!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>
    <script src="./axios.js"></script>
</head>
<body>
    <button id="btn1">
        发起get请求
    </button>
    <script>
        document.querySelector('#btn1').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsObj = {name: 'zs', age: 20}
            axios.get(url, {params: paramsObj}).then(function (res) {
                console.log(res.data);
                //通过打印我们发现res并不是我们想要的数据，它是经过axios包装的数据 拥有6个属性   我们想要的数据存储在res.data中             
                //if(res.status === 200 )
            })
        })
    </script>
</body>
</html>

Axios发起post请求的语法：

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

具体示例如下：

<!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>
    <script src="./axios.js"></script>
</head>
<body>
    <button id="btn2">发起post请求</button>
    <script>
        document.querySelector('#btn2').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/post'
            var dataObj = {address: '陕西', location: '长安区'}
            axios.post(url, dataObj).then(function(res) {
                console.log(res.data)
            })
        })
    </script>
</body>
</html>

Axios直接发起请求

1.使用Axios发起get请求

 document.querySelector('#btn3').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsData = { name: '张三', age: 30 }
            axios({
                method: 'GET',
                url: url,
                params: paramsData,
            }).then(function (res) {
                console.log(res.data)
            })
        })

2.直接使用axios发起post请求

<!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>
    <script src="./axios.js"></script>
</head>
<body>
    <button id="btn4">直接使用axios发起post请求</button>
    <script>
        document.querySelector('#btn4').addEventListener('click', function() {
            //url与data可以写在上边  也可以直接写在axios函数内
            var url = 'http://www.liulongbin.top:3006/api/post'
            var data = { name: '奥利奥', age: 18, gender: '女'}
            axios({
                method: 'POST',
                url: url,
                data: data,
            }).then(function(res) {
                console.log(res.data);
            })
        })
    </script>
</body>
</html>

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Axios

什么是Axios：Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象，Axios简单易用。相比于jquery，Axios更加轻量化，只专注于网络数据请求。Axios发起get请求的语法：axios.get('url',{params:{/*参数*/}}).then(callback)具体的请求实例如下：...
复制链接

扫一扫