vue复习-vue-axios从加载到使用

vue-axios是vue中使用较多的数据请求方式，下面就来介绍一下vue-axios的使用方式

首先我们需要先加载vue-axios的依赖

进入项目，打开CMD 输入：

npm install axios

这是安装一般使用的axios的语句，为了加载vue-axios我们需要再次输入

npm install --save axios vue-axios

等命令执行完毕之后，就可以打开我们的JS入口文件，添加vue-axios的依赖了，个人推荐使用下面这种

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

不需要修改config也不需要添加原型链，直接可以使用

然后是vue-axios的语法

this.axios({
     method:'post',
     data:{},
     url:apiUrl
    }).then((response) =>{          //这里使用了ES6的语法
     console.log(response)          //请求成功返回的数据
    }).catch((error) =>
      console.log(error)//请求失败返回的数据
    )

主要的就是post方法，gei方法和post没什么不同，而且在这里不推荐使用get，因为相比post，get的安全性确实有所缺失

console打印后发现数据请求成功，然后呢该如何使用他呢，就需要在data方法里动一动手脚，假设返回的数据形式如下

我们需要取用bbsTopic中的数据，首先需要在data中添加一个空的容器如

  data () {
    return {
      topic:[]
    }
  },

 topic:[]就是我们所需要的容器，然后在axios请求中将需要用到的bbsTopic添加到容器中

   this.axios({
     method:'post',
     data:{},
     url:apiUrl
    }).then((response) =>{          
     this.topic=response.data.data.bbsTopic  //找到需要添加的bbsTopic使this.topic等于他
     console.log(this.topic)                 //打印添加后的this.topic
    }).catch((error) =>
      console.log(error)//请求失败返回的数据
    )

然后在页面标签中使用v-for循环加载它

     <ul>
       <li v-for="topics in topic">
         {{ topics.id }}
       </li>
     </ul>

 标签代码中，topic就是我们的容器名，topics是我们用来取出容器中数据的名字，这样，vue-axios获取到的数据就可以直接使用了

谢谢观看

我是你们的狐狸