每个页面单独封装
好处
只要面向页面对应的js文件写请求即可
1、首先把axios封装成request.js
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>