2021SC@SDUSC 软件工程应用与实践（14）——异步请求

2021SC@SDUSC

一、引言

本篇文章将对老年照护健康知识图谱项目中在钩子函数中使用的异步请求进行分析。

二、代码分析

1.在钩子函数中使用异步请求

1.安装 Axios

cnpm install --save vue-axios

2.main.js引用 Axios

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

3.准备数据 ： 只有 static 目录下的文件是可以被访问到的，所以静态文件被放到了该目录下。
数据和之前使用用的json数据相同。

// 静态数据存放的位置
static/mock/data.json

4.在 beforeRouteEnter 中进行异步请求

Profile.vue:

  export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }

5.执行

javascript
export default {undefined
name: “UserProfile”,
beforeRouteEnter: (to, from, next) => {undefined
console.log(“准备进入个人信息页”);
next();
},
beforeRouteLeave: (to, from, next) => {undefined
console.log(“准备离开个人信息页”);
next();
}
}

参数说明:

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
• next() 跳入下一个页面
• next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
• next(false) 返回原来的页面
• next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例