axios发起数据请求【详细】

原创已于 2022-04-12 17:35:25 修改 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

于 2022-03-06 22:17:49 首次发布

JavaScript 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何使用axios库发起HTTP的GET和POST请求，包括了基本的使用方式以及类似jQuery中$.ajax的调用方法。通过示例代码展示了axios发起get和post请求的步骤，并对比了两种请求方式的区别，强调了参数传递的不同。适合前端开发者学习和参考。

axios发起数据请求

axios类似于jQuery都是一个库，axios是专注于数据请求方面的库，轻量级，非常好用

使用前需要先调用axios.js的包

// 使用前先调用
<script src="./js/axios.js"></script>

直接上才艺，先分开说如何使用axios发起get请求以及post请求，再使用axios类似于jQuery中的$.ajax({})的方式发起get以及post请求

使用axios发起get请求

 <button id="btn1">发起get请求</button>
 document.querySelector('#btn1').addEventListener('click', function() {
            var url = 'http://liulongbin.top:3006/api/get';
            var paramsObj = {
                name: 'zs',
                age: 29
            };
            axios.get(url, {
                params: paramsObj
            }).then(function(res) {
                var result = res.data;
                console.log(result);
            })
        })

调用的结果：
在这里插入图片描述

使用axios发起post请求

    <button id="btn2">发起post请求</button>
     document.querySelector('#btn2').addEventListener('click', function() {
            var url = 'http://liulongbin.top:3006/api/post';
            var dataObj = {
                name: 'zs',
                age: 29
            };
            axios.post(url, dataObj).then(function(res) {
                var result = res.data;
                console.log(result);
            })
        })

调用输出结果：
在这里插入图片描述

使用axios直接发起get请求类似jQuery中$.ajax的方式

    <button id="btn3">直接使用axios发起get请求</button>
     document.querySelector('#btn3').addEventListener('click', function() {
            var url = 'http://liulongbin.top:3006/api/get';
            var paramsData = {
                name: 'zs',
                age: 20
            };
            axios({
                method: 'get',
                url: url,
                params: paramsData,

            }).then(function(res) {
                console.log(res.data);
            })
        })

调用请求的结果是：
在这里插入图片描述

使用axios直接发起post请求类似jQuery中$.ajax的方式

 <button id="btn4">直接使用axios发起post请求</button>
  document.querySelector('#btn4').addEventListener('click', function() {
            var url = 'http://liulongbin.top:3006/api/post';
            var data = {
                name: 'zs',
                age: 20
            };
            axios({
                method: 'post',
                url: url,
                data: data
            }).then(function(res) {
                console.log(res.data);
            })
        })