Vue学习笔记-axios请求等等问题

axios专注网络请求的库
基本语法

axios({
            method: '请求的类型get或post',
            url: '请求的URL地址'
            //URL中的查询参数
            //params:{}
            //请求体参数
            //data:{}
        }).then((result) => {
            //.then用来指定请求成功之后的回调函数
            //形参中的result是请求之后的结果
            
        })

如果调用某个方法的返回值是Promise实例
则前面可以添加await
await只能用在被async“修饰”的方法中

解构赋值

<div>
        <button id="btnGet">发起GET请求</button>
        <button id="btnPost">发起POST请求</button>
    </div>
    <script>
        document.querySelector('#btnPost').addEventListener('click',
 async function () {


            const { data } = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                //参数
                data: {
                    name: 'zs',
                    age: 20
                }
            })
            console.log(data)
        })
        document.querySelector('#btnGet').addEventListener('click',
 async function () {
            //const {data:res} = await axios({
            const result = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks'
            })
            console.log(result)
            //console.log(res.data)
            //此时返回值result里有很多属性 获取其中data的值
            //就要进行解构 像上面post请求的 {data} 
            //此时若该名为data属性内 你要取得值的属性也为data 重名
            //那就修改{data} 为 {data:此处自定义一名字} 如{data:res} 
            //此时第一次的data更名为res 方便区分 
            //否则console.log(data.data) 难以辨认

        })
       
    </script>

也可以直接使用axios.get|axios.post
const { data :res } = await axios.get('',{params{}})
axios.post('url',{参数})
参数根据具体情况修改删除