【Vue2】Axios、Async+Await、解构赋值

 

Axios入门使用，Async和Await用法，解构赋值语法

<!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="./../lib/vue.js"></script>
  <script src="./../lib/axios.min.js"></script>
</head>
<body>
<!-- 

    在后面的Vue|、
    React课程中都会用到axios来请求数据。
    中文官网地址: http://www.axios-js.com/
    英文官网地址: https://www.npmjs.com/package/axios
 -->

<button id="postBtn">postBtn</button>
<button id="postBtn2">postBtn2</button>
<button id="postBtn3">postBtn3</button>

<script>


// result对象是 Promise返回的
// const result = axios({
//     method: 'GET',
//     url: 'http://www.liulongbin.top:3006/api/getbooks'
// })
// result.then(res => {
//     console.log(res.data)
// })

// AXIOS GET请求传参
// const result2 = axios({
//     method: 'GET',
//     url: 'http://www.liulongbin.top:3006/api/getbooks',
//     params: { // url传参
//         aaa: 100,
//         vvv: 'sdas'
//     }
// })
// result2.then(res => {
//     console.log(res.data)
// })

let postBtn = document.querySelector('#postBtn')
postBtn.addEventListener('click', function (event) {
    const result2 = axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        params: { // url传参 post请求也能传递
            aaa: 100,
            vvv: 'sdas'
        },
        data: {
            name: 'zs',
            age: 20
        }
    })
    result2.then(res => {
        console.log(res.data)
    })
})

 // 如果返回值是Promise对象，可以使用async + await简化代码块
 let postBtn2 = document.querySelector('#postBtn2')
 postBtn2.addEventListener('click', async function (event) {
    const result2 = await axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        params: { // url传参 post请求也能传递
            aaa: 100,
            vvv: 'sdas'
        },
        data: { // 请求体传参 在GET请求中并不会携带....
            name: 'zs',
            age: 20
        }
    })
    console.log(result2)
})

// 获取一部分属性对象 可以使用解构语法
let postBtn3 = document.querySelector('#postBtn3')
postBtn3.addEventListener('click', async function (event) {
    /**
     * 可以结构重命名
     * data: res 将data属性更名为res
     * 
     * 解决 data.data的问题
     */
    const { config, data: res, headers, request, status, statusText } = await axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
    })
    console.log(res.data)
})

</script>
</body>
</html>

 

Axios的Post请求和GET请求

<!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="./../lib/vue.js"></script>
  <script src="./../lib/axios.min.js"></script>
</head>
<body>
<!-- 

    在后面的Vue|、
    React课程中都会用到axios来请求数据。
    中文官网地址: http://www.axios-js.com/
    英文官网地址: https://www.npmjs.com/package/axios
 -->
<button id="getBtn">GET-BTN</button>
<button id="postBtn">POST-BTN</button>

<script>
    document
        .querySelector('#getBtn')
        .addEventListener('click', async function(event) {
        // 无参GET
        // const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
        // console.log(result)

        // url带参GET
        const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
            params: { id: 1 }
        })
        console.log(result)
    })
    document
        .querySelector('#postBtn')
        .addEventListener('click', async function(event) {
        // url带参POST 对象直接是请求体
        const { data: result } = await axios.post('http://www.liulongbin.top:3006/api/post', {
            asdas : false
        })
        console.log(result)      
    })
</script>
</body>
</html>

　　

 

posted @ 2022-05-07 10:07  emdzz  阅读(737)  评论(0)    收藏  举报