每个页面单独封装

好处

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

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

Vue-axios

2、请求单独文件

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

3、单独写请求

about.js

  1. import {request} from './request.js';
  2. export function person() {
  3. return request({
  4. url: 'getUser.php'
  5. })
  6. };

About.vue

  1. <template>
  2. <div>
  3. <el-button type="success" @click="getPerson">成功按钮</el-button>
  4. <br>
  5. {{personName}}
  6. <router-view />
  7. </div>
  8. </template>
  9. <script>
  10. //1、引入对应页面的请求函数
  11. import { person } from 'network/about.js';
  12. export default {
  13. name: 'About',
  14. data() {
  15. return {
  16. //4、用一个变量储存返回的结果
  17. personName: ''
  18. };
  19. },
  20. methods: {
  21. //2、创建一个方法调用请求函数
  22. getPerson() {
  23. //3、调用请求函数,成功后结果返回给then的参数res,失败的话返回给catch的参数err
  24. person()
  25. .then(res => {
  26. console.log(res);
  27. //5、把结果保存到本业的变量,否则函数执行完毕res就销毁了
  28. this.personName = res[0][1]
  29. })
  30. .catch(err => {
  31. console.log(err);
  32. });
  33. }
  34. }
  35. };
  36. </script>