每个页面单独封装

好处

只要面向页面对应的js文件写请求即可

1、首先把axios封装成request.js

Vue-axios

2、请求单独文件

把每个页面的请求，单独写在对应的js文件，放在network文件夹内

3、单独写请求

about.js

import {request} from './request.js';
export function person() {
  return request({
    url: 'getUser.php'
  })
};

About.vue

<template>
  <div>
    <el-button type="success" @click="getPerson">成功按钮</el-button>
    <br>
    {{personName}}
    <router-view />
  </div>
</template>
<script>
  //1、引入对应页面的请求函数
import { person } from 'network/about.js';
export default {
  name: 'About',
  data() {
    return {
      //4、用一个变量储存返回的结果
      personName: ''
    };
  },
  methods: {
    //2、创建一个方法调用请求函数
    getPerson() {
      //3、调用请求函数，成功后结果返回给then的参数res，失败的话返回给catch的参数err
      person()
        .then(res => {
          console.log(res);
          //5、把结果保存到本业的变量，否则函数执行完毕res就销毁了
          this.personName = res[0][1]
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>