1, 数据请求实战案例

// MyHeader.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="clickHandler">Search</button>
      </div>
    </section>
</template>

<script>
export default {
  name: "MyHeader",
  props:[],
  data() {
    return {
      keyword:""
    };
  },
  methods: {
    clickHandler(){
      if(this.keyword.trim() === ""){
        alert("用户名不能为空！")
        return;
      }
      // 目的：发送数据级兄弟
      this.$bus.$emit("sendKeyword",this.keyword)
      this.keyword = ""; // 清除输入框中的内容
    }
  },
};
</script>

<style lang="less" scoped>
</style>

// MyMain.vue
<template>
  <div>

    <!-- 欢迎界面 -->
    <div v-show="show==0">欢迎....</div>

    <!-- 正在加载中 -->
    <div v-show="show==1">正在加载中....</div>

    <!-- 正常显示用户信息 -->
    <div class="row" v-show="show==2">
      <div class="card" v-for="(card) in items" :key="card.id">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img :src="card.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ card.login }}</p>
      </div>
    </div>

    <!-- 失败 -->
    <div v-show="show==3">失败....</div>
  </div>
</template>

<script>
// import axios from "axios";
import request from "../api/request"
export default {
  name: "MyMain",
  props: [],
  // mounted() {
  //   this.$bus.$on("sendKeyword", async (val) => {

  //     // 发送ajax请求
  //     this.show = 1;

  //     // console.log("val:",val);
  //     try {
  //       // let result = await axios.get(
  //       //   `https://api.github.com/search/users?q=${val}`
  //       // );

  //       // 现在的api接口是 /search/users?q=${val}
  //       // 前面没有写域名，没有写端口
  //       // 默认就向当前服务器发请求
  //       // 当前服务器是谁？
  //       // 答：http://localhost:8081/
  //       let result = await axios.get(`/api/search/users?q=${val}`);
  //       // console.log(result);
  //       this.items = result.data.items;

  //       this.show = 2;
  //     } catch (error) {
  //       console.log("error:", error);

  //       this.show = 3;
  //     }
  //   });
  // },

   mounted() {
    this.$bus.$on("sendKeyword", async (val) => {
      this.show = 1;
      try {
        // request是我们二次封装的axios
        // 后面写项目，一般都是使用封装后的axios
        let result = await request.get(`/api/search/users?q=${val}`);
        this.items = result.items;

        this.show = 2;
      } catch (error) {
        console.log("error:", error);
        this.show = 3;
      }
    });
  },
  data() {
    return {
      items: [],
      show: 0, // 0表示欢迎界面   1表示正在加载   2表示用户信息   3失败
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>

// App.vue
<template>
  <div id="app">
    <div class="container">
      <MyHeader></MyHeader>
      <MyMain></MyMain>
    </div>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyMain from "./components/MyMain.vue";
export default {
  name: "App",
  data() {
    return {
      money: 0,
    };
  },
  mounted() {},
  components: {
    MyHeader,
    MyMain,
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false


new Vue({
  beforeCreate(){
    Vue.prototype.$bus = this;
  },
  render: h => h(App),
}).$mount('#app')

// api/request.js
// 对axios的二次封装

import axios from "axios";
// 引入进度条
import nprogress from "nprogress";
// 引入对应的样式
import "nprogress/nprogress.css"

// 配置请求拦截器
axios.interceptors.request.use(config=>{
    // 在请求拦截器中，还可以做很多的事情

    // 开启进度条
    nprogress.start();
    return config
})

// 配置响应拦截器
axios.interceptors.response.use(res=>{
    nprogress.done();
    return res.data;
},()=>{
    // 响应失败
    nprogress.done();
    // 终止Promise链
    return new Promise();
})

// 导出我们封装后的axios
export default axios;