jQuery ? NO, Axios——请求数据

Try Tomato

已于 2022-04-26 19:43:03 修改

阅读量775

点赞数 2

分类专栏： # + Axios 文章标签：前端服务器 http javascript ajax

于 2022-03-21 19:40:19 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/123643640

版权

+ Axios 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

axios也是一个JS库，我们今天要说的是使用axios来进行我们的Ajax请求

那么问题来了，我们为什么要放着jQuery不用，用axios呢？

因为这个JS库是专门用于网络数据请求的库，它有着俩个优点：相比于原生XMLHttpRequest对象毋庸置疑它非常的简洁方便；相比于jQuery更加的小（文件轻量），更加的专业专一（专注网络数据请求）

和jQuery相同，都有get请求方式,post请求以及在函数内部指定请求三种方式来请求Ajax

我们通过代码和请求状况来入门axios：

一.GET请求：

我们调用axios方法发起请求后的返回值是一个Promise对象，也就是说返回值res不是一个真正的数据

const btn1 = document.querySelector('#button1')

    btn1.addEventListener('click',function(){
        //请求地址
        const url = "http://www.XXXXXXXX/api/get"
        //URL中的查询参数
        const pObj = {name:"小蜗",age:22}

        axios.get(url,{params:pObj}).then(function(res){
            console.log(res.data)
        })
    })


//ES6新语法（解构赋值）
const btn1 = document.querySelector('#button1')

    btn1.addEventListener('click',async function(){
        //请求地址
        const url = "http://www.XXXXXXXX/api/get"
        //URL中的查询参数
        const pObj = {name:"小蜗",age:22}

        const {data : res} = await axios.get(url,{params:pObj})
            console.log(res.data)
    })

二.POST请求：

const btn2 = document.querySelector('#button2')

    btn2.addEventListener('click',function(){

        const url = "http://www.XXXXXXXXXX/api/post"
        const obj = {name:"小蜗",age:22}

        axios.post(url,{data:obj}).then(function(res){
            console.log(res.data)
        })
    })


//或者我们post请求不需要去书写data，直接在对象中写入数据就可以了
const btn2 = document.querySelector('#button2')

    btn2.addEventListener('click',function(){

        const url = "http://www.XXXXXXXXXX/api/post"
        const obj = {name:"小蜗",age:22}

        axios.post(url,{obj}).then(function(res){
            console.log(res.data)
        })
    })


//ES6新语法（解构赋值）
const btn2 = document.querySelector('#button2')

    btn2.addEventListener('click',async function(){

        const url = "http://www.XXXXXXXXXX/api/post"
        const obj = {name:"小蜗",age:22}

        const {data : res} = await axios.post(url,{obj})
        console.log(res.data)
    })

请求成功：

三.内部请求：

axios({

method:'请求的类型post/get',

url:'URL',

data:{

post数据(get请求没有data)

},

params:{

get参数(post没有params)

}

}).then(回调函数)

<!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="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button>点击发起POST请求</button>
    </div>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            axios({
                method:'POST',
                url:'http://www.XXXXXXXXXX',
                data:{
                    name:'小蜗',
                    age:22
                }
            }).then(function(res){
                console.log(res.data);
            })
        })
    </script>
</body>
</html>

因为axios的返回值是一个promise对象，所以我们还可以使用await搭配async得到值：

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){
    const res = axios({
        method:'POST',
        url:'http://www.XXXXXXXXXX',
        data:{
            name:'小蜗',
            age:22
        }
    })
    console.log(res)
})

tips：如果调用某个方法的返回值是promise对象，那么我们就可以在前面使用await

如果我们使用了await的话，还需要使用async来修饰方法

我们可以使用解构赋值来得到数据：

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){
    const {data} = await axios({
        method:'POST',
        url:'http://www.XXXXXXXXX',
        data:{
            name:'小蜗',
            age:22
        }
    })
    console.log(data)
})

如果我们想要直接获取到数据条，可以data.data来获取到，但是这样不便利于阅读，所以我们可以使用：res来将解构出来的data重命名为res，使用res.data来获取输出数据

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){
    const {data : res} = await axios({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks'
    })
    console.log(res.data)
})