Vue2.0-计算属性&axios

【计算属性】

---

computed

了解计算属性，方便代码的复用

· 什么是计算属性

         经过一系列运算之后，最终得到一个属性值

         这个动态计算出来的属性值可以被 模板结构 或 methods 方法使用。

         所有的计算属性都要放在 computed 节点之下。

特点：

· 计算属性在定义的时候，要定义成“方法格式”

· 在使用计算属性的时候，当普通的属性使用即可

好处：

· 实现了代码的复用

· 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值

示例代码如下：

【axios】

---

    axios是一个专注于网络请求的库

    调用axios方法得到的返回值是 Promise 对象

    针对返回值是promise的，可以使用 async await修改

    axios在请求到数据之后，在真正的数据之外，套了一层壳。涉及到 解构赋值

（一）axios的基础语法

基本语法如下：

（二）用axios怎么传参

    params(GET请求) 与 data（POST请求）

1、发起GET请求

例：假设要请求getbooks中id为1的数据

请求结果检查

2、发起POST请求

（三）结合async、await调用axios

        修改代码（async、await）

        · 如果调用某个方法的返回值是promise 实例，则前面可以添加 await ！

        · await 只能用在被 async “修饰”的方法中。即在 async function(){}

document.querySelector('#btnPOST').addEventListener('click',async function(){
            //如果调用某个方法的返回值值Promise 实例，则前面可以添加 await  !!
            //await 只能用在呗async "修饰"的方法中
            const result =await axios({
                methods: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',  //这个接口用不了了
                data:{
                    name:'zs',
                    age:20
                }
            }).then(function(result){
                console.log(result)
            })


            console.log(result)
        })

但是在最后的result 其不是真实的数据，真实的数据是其下的一个data包装的里面的东西

· 使用解构赋值

真正的数据对象其实是在上面的result.data中。

所以直接使用解构赋值即可

修改代码如下

const { data } =await axios({
      methods: 'POST',
      url: 'http://www.liulongbin.top:3006/api/post',  //这个接口用不了了
      data:{
          name:'zs',
          age:20
      }
})
console.log(data)

由于其中的接口无法使用，最终不能呈现出实现结果

发起  GET请求（使用解构赋值）

这里/解构赋值的时候，使用 : 进行重命名

代码

document.querySelector('#btnGET').addEventListener('click',async function(){
            //解构赋值的时候，使用 : 进行重命名
            const { data : res } =await axios({
                methods: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
            })
            console.log(res.data)
        })

实现效果

小总结：

    1、调用axios之后，使用async/await进行简化

    2、使用解构赋值，从axios封装的大对象中，把data竖形解构出来

    3、把解构出来的data属性，使用 冒号 : 进行重命名，一般重命名为{ data : res }

（四）基于 axios.get 和 axios.post 发起请求

基本的语法格式 如下

axios.get('url地址',{
                //GET参数
                params: {}
            })

例子：