前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
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" /> <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>
