axios二次封装

一.引入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的关闭效果

七.效果图

 (1)发送之前

 (2)返回之前