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>

　　

【Vue2】Axios、Async+Await、解构赋值的更多相关文章

  1. 简单的axios请求返回数据解构赋值

    本地  data.json 文件 { "name": "大熊", "age": 18, "fnc": [ 1, 2, 3 ...

  2. ES6--let,解构赋值,promise && ES7--async

    ES-->IE10.Google.火狐 ES6 let 声明的关键字 不能重复声明 块级作用域 <input type="button" value="1&q ...

  3. 变量的解构赋值////////////z

    变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...

  4. JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

    1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...

  5. ES 6 : 变量的解构赋值

    1. 数组的解构赋值 [ 基本用法 ] 按照一定的模式从数组或者对象中取值,对变量进行赋值的过程称为解构. 以前,为变量赋值只能直接指定值: 而ES 6 允许写成下面这样: 上面的代码表示,可以从数组 ...

  6. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  7. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  8. ES6学习笔记（let,const,变量的解构赋值）

    1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...

  9. es6的解构赋值用途

    (1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数 ...

  10. ES6学习之 解构赋值

    最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...

随机推荐

  1. centos7下利用qemu搭建arm模拟器

    1 目的 在centos7下使用qemu搭建arm模拟器. 参考博客: centos下利用qemu搭建arm模拟器 - 寒水司天 - 博客园 (cnblogs.com) 从零使用qemu模拟器搭建ar ...

  2. C#.NET X509Certificate2 该项不适于在指定状态下使用

    X509Certificate2 x509 = new X509Certificate2(lblPfxPath.Text,txtPfxPwd.Text.Trim() ); string xmlpri= ...

  3. 10位，13位时间戳转为C#.NET格式时间 DateTime

    10位,13位时间戳转为C#.NET格式时间 DateTime - public static DateTime ToDateTime( string timestamp) { var tz = Ti ...

  4. mysql备份实战

    1.备份恢复演练(mysqldump+binlog) 知识储备 如下内容.. 全量备份 全量数据,指的是某一整个数据库(如kings)中所有的表.以及表数据,进行备份. 例如备份所有数据库.以及所有数 ...

  5. Truncate的使用详解

    删除表中数据的方法有 delete 和 truncate, 其中TRUNCATE TABLE用于删除表中的所有行,而不记录单个行删除操作:TRUNCATE TABLE 与没有 WHERE 子句的 DE ...

  6. 企业快速落地IT服务管理体系的六大关键步骤

    许多企业在实施信息化战略时,一味地追求"技术高消费"而忽视了对信息技术的管理和内部业务流程的变革,侧重点仍然只是事后的技术支持和故障解决方面,随着企业对于信息技术的依赖程度的加重, ...

  7. golang 所有关键字的列表及释义归类

    golang 所有关键字的列表及释义归类,截至1.18版本. [控制结构] if  : 条件语句,基于布尔表达式的值决定是否执行特定的代码块. else. else if     : 用在 if 语句 ...

  8. Woothosting 6$/年 vps测评

    当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解 Woothosting 6$/年 vps测评** 日期:2018-7- ...

  9. 解决Mixed Content:the page at‘https://' was loaded over HTTPS,but requested an insecure resource 'http://'

    问题:在Vue项目中使用axios访问了一个http协议的接口,报错如下 查资料后发现原因是在https中请求http接口或引入http资源都会被直接blocked(阻止),浏览器默认此行为不安全,会 ...

  10. yum update和yum upgrade的区别

    看见网上很多关于这个问题的解答,但是大部分都是错的,误人子弟! 很多都是执行这两个命令,然后查看系统的变化.看似严谨,实则愚蠢至极. 就算不懂内核,也应该懂得什么是内核呀!也应该懂得内核是怎么进入的啊 ...