[Vue]vue-resource

---

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

---

---

1. vue-resource

vue 发送请求推荐使用 axios ，vue-resource 的更新频率不高，且 vue 也推荐 axios。

vue-resource 是 vue 中一个用于发送请求的插件。

1.1 安装 vue-resource

npm i vue-resource

1.2 导入 vue-resource

vue-resource 中使用的是默认导出，导入 vue-resource 使用一个变量接收即可。

import vueResource from 'vue-resource'

1.3 使用插件 vue-resource

Vue.use(vueResource)

使用 Vue 的 use() 方法使用插件，在所有的 vue 实例对象和组件实例对象中会多一个 $http 属性。

1.4 使用 vue-resource 发送请求

vue-resource 与 axios 一样都是 promise 风格的，vue-resource 发送请求的方法与形式和 axios 一样。

以发送 get 请求为例：

• axios：

  	  // 发起请求获取用户数据
        axios.get(`请求地址`).then(
          response => {
            console.log('请求成功')
            // 请求成功的处理
          },
          error => {
            console.log('请求失败', error)
            // 请求失败的处理          
          }
        )
  

• vue-resource：

  	  // 发起请求获取用户数据
        this.$http.get(`请求地址`).then(
          response => {
            console.log('请求成功')
            // 请求成功的处理
          },
          error => {
            console.log('请求失败', error)
            // 请求失败的处理          
          }
        )
  

2. github 案例 vue-resource 发送请求

main.js

import Vue from 'vue'
import App from './App.vue'
// 导入 vue-resource
import vueResource from 'vue-resource'

// 使用插件 vue-resource
Vue.use(vueResource)
//关闭vue的生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    // 让vue的实例对象作为全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')

Search.vue

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyWord" />
      &nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>
// 导入axios
import axios from 'axios'

export default {
  name: 'Search',
  data() {
    return {
      keyWord: ''
    }
  },
  methods: {
    searchUsers() {
      // 请求开始前初始化数据
      this.$bus.$emit('updateUsers', {
        // 进行请求了，取消欢迎词
        isFirst: false,
        // 请求开始，进入加载状态
        isLoading: true,
        // 无报错信息
        errorMsg: '',
        // 请求开始前，用户数据为空
        users: []
      })
      // 发起请求获取用户数据
      this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        response => {
          console.log('请求成功')
          // 触发全局事件总线事件  传递数据
          // this.$bus.$emit('updateUsers', response.data.items)
          // 请求成功传递数据
          this.$bus.$emit('updateUsers', {
            // 原先是否第一次加载页面状态已经修改不用再次传递修改
            // 请求结束
            isLoading: false,
            // 无报错信息
            errorMsg: '',
            // 用户数据
            users: response.data.items
          })
        },
        error => {
          console.log('请求失败', error)
          // 请求失败传递数据
          this.$bus.$emit('updateUsers', {
            // 原先是否第一次加载页面状态已经修改不用再次传递修改
            // 请求结束
            isLoading: false,
            // 报错信息
            errorMsg: error,
            // 请求失败用户数据为空
            users: []
          })
        }
      )
    }
  }
}
</script>