一.引入element-ui
(1)下载
npm i element-ui
(2)引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
二.用mock模拟接口
具体可以到mock的官网配置:fastmock 在线接口 Mock 平台
三.APP.vue
<template>
<div class="">
<el-button type="primary" @click="fn" >按钮</el-button>
</div>
</template>
<script>
import { GetHomePage } from "../aa/api.js";
export default {
name: "",
created(){
},
methods: {
fn(){
GetHomePage(123).then(res=>console.log(res))
}
},
components: {},
};
</script>
<style scoped lang="less"></style>
四.api.js 发送请求的文件夹
(1)文件存放的目录
(2)代码
import request from "../utils/http";
export function GetHomePage(data) {
return request({
method:'get',
params: {
name:data,
},
});
}
五.http 封装的文件夹
(1)文件存放的目录
(2)代码
import axios from "axios";
// 导入element-ui的loading,message
import { Loading } from "element-ui";
let loading;
const http = axios.create({
baseURL:
"https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api",
timeout: 5000,
});
// 开始loading
function startLoading() {
loading = Loading.service({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
}
function endLoading() {
loading.close();
}
// 请求拦截
http.interceptors.request.use(
// 发送请求之前加载
(config) => {
startLoading();
return config;
},
(error) => {
// 请求错误返回的结果
return Promise.reject(error);
}
);
// 响应拦截
http.interceptors.response.use(
(config) => {
endLoading();
return config.data;
},
(error) => {
return Promise.reject(error);
}
// Loading.close()
);
// 将封装好的跑出去
export default http;
六.实现的思路
1.在发送请求之前进行一个loading效果的加载
2.在返回服务器的数据进行一个loading的关闭效果