Vue之关于ajax

使用ajva发送请求可以有效和后台进行数据交互处理，对于Vue来说，常用的有两个ajax库，分别是：vue-resource，axios

一、vue-resource

vue-resource是一个vue插件，非官方库，在vue1.x中使用广泛，目前使用较少，在使用这个方式进行ajax编码：
1、首先用命令下载vue-resource资源，打开命令窗口，输入：npm install vue-resource --save
2、在vue的js入口文件中引入模块，并使用这个插件，在引入模块后，默认会带有属性$http.get/post用于发送不同请求：

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'

//引入vue-resource插件
Vue.use(VueResource)   //默认会添加$http属性
/* eslint-disable no-new */
var vue = new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

3、完成上面两步后就可以通过vue/组件对象发送ajax请求了，如，将请求数据searchName，searchUrl在页面中显示出来：

mounted() {
    /*ajax请求1：vue-resource*/
    var url = 'https://api.github.com/search/repositories?q=v&sort=stars'
    this.$http.get(url).then(
      //请求成功的回调函数
      (response) => {
        console.log(response)
        this.searchName = response.data.items[0].name
        this.searchUrl = response.data.items[0].html_url
      } ,
      //请求失败的回调函数
      (response) =>{
         console.log('ajax-resource请求失败')
      }
    )
  }

二、axios

axios也可实现ajax请求，在vue中，axios是一个资源请求库，是官方推荐使用的资源库，在vue2.x中使用广泛，目前很多vue开发项目都是用这种ajax请求方法。使用此种方式进行ajax编码：
1、首先要在命令窗口输入：npm install axios --save 下载axios资源。
2、在你需要发送ajax请求编码的组件页面引入axios模块，并进行发送ajax请求编码。如：

//导入axios库
import axios from 'axios'

 mounted() {
    /*ajax请求2：axios请求*/
    var url2 = 'https://api.github.com/search/users?q=aa'
    axios.get(url2).then(response => {
      //请求成功回调函数
      console.log(response)
      this.searchName2 = response.data.items[0].login
      this.searchUrl2 = response.data.items[0].html_url
    }).catch(error => {
      //请求失败回调函数
       console.log('axios请求失败')
      console.log(error)
    })
  }

一个使用axios发请求和PubSubJs通信编码的小案例：

main.js

//入口js文件，实例化一个vue
import Vue from "vue";
import App from "./App";

var vue = new Vue({
  el:'#app',
  components:{
    App
  },
  template:"<App />"
})

App.vue

<template>
  <div class="container">
    <Header />
    <Main />
  </div>
</template>

<script>
  import Header from "./components/Header";
  import Main from "./components/Main";
  export default {
    name: "App",
    components:{
      Header,
      Main
    }
  }
</script>

<style scoped>
</style>

Header.vue

<template>
  <div class="jumbotron">
    <h1>Search Github Users</h1>
    <input type="text" placeholder="enter the name your search" v-model="searchName">
    <button @click="search">Search</button>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'
  export default {
    name: "Header" ,
    data(){
      return{
        searchName:''
      }
    },
    methods:{
      search:function () {
        //发布消息
        PubSub.publish('search',this.searchName)
      }
    }
  }
</script>

<style scoped>

</style>

Main.vue

<template>
  <div class="container">
    <h3 v-if="initText">输入用户名搜索</h3>
    <h3 v-if="loading">搜索中……</h3>
    <h3 v-if="errorMsg" >数据请求失败</h3>
    <ul class="list-inline listUl">
      <li class="listItem col-md-4" v-for="(item,index) in successMsg" :key="index" >
        <a :href="item.html_url"  class="listA">
          <img :src="item.avatar_url"  alt="avatar" style="height: 100px;width: 100px">
        </a>
        <p class="listLable">{{item.login}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
   import PubSub from 'pubsub-js'
   import axios from 'axios'
  export default {
    name: "Main",
    data(){
      return {
        initText:true,
        loading:false,
        errorMsg:false,
        successMsg:[]
      }
    },
    mounted() {
      //在search之后，发送请求，订阅消息
      PubSub.subscribe('search',(msg,searchName) => {
        this.initText = false
        this.loading = true
        var url = 'https://api.github.com/search/users?q=' + searchName
        console.log(url)
        axios.get(url).then((respons) => {
          //console.log('请求 成功')
          //console.log(respons.data.items)
          this.initText = false
          this.loading = false
          //直接将获取到的数组元素赋值给successMsg
          //this.successMsg = respons.data.items
          //console.log(this.successMsg)

          //将获取到的数组元素选择性的将需要的元素值赋值给successMsg
          var success = respons.data.items.map((item) => ({
            html_url:item.html_url,
            avatar_url:item.avatar_url,
            login:item.login
          }))
          console.log(success)
          this.successMsg = success

        }).catch(error => {
          console.log('请求错误')
          this.initText = false
          this.loading = false
          this.successMsg = []
          this.errorMsg = true
        })
      })
    }
  }
</script>

<style scoped>
.listUl{
  width: 98%;
}
.listItem{
  height: 160px;
  border:1px solid lightgray;
  float: left;
  border-radius: 2px;
  text-align: center;
  margin-bottom: 25px;
}
.listA{
  display: block;
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
}
</style>