Element-ui--loading+网络请求

最新推荐文章于 2024-07-01 18:01:31 发布

end-less

最新推荐文章于 2024-07-01 18:01:31 发布

阅读量1.2k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/zg97zb/article/details/109117435

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

在进行网络请求时，通常不希望用户对界面进行交互，并且提示用户客户端正在网络请求。所以需要有一个东西来阻止交互并且提示用户正在请求网络。于是乎有了以下玩意。。。

我的目录结构：

1.安装element-ui

cnpm i element-ui -S

2.在main.js中引用elementui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

3.封装loading

首先创建一个loading.js的文件。并写入一下代码。

import { Loading } from 'element-ui';
 
let loadingCount = 0;
let loading;
 
const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...',//可以自定义文字
    spinner:'el-icon-loading',//自定义加载图标类名
    background: 'rgba(0, 0, 0, 0.7)'//遮罩层背景色
  });
};
 
const endLoading = () => {
  loading.close();
};
 
export const showLoading = () => {
  if (loadingCount === 0) {
    startLoading();
  }
  loadingCount += 1;
};
 
export const hideLoading = () => {
  if (loadingCount <= 0) {
    return;
  }
  loadingCount -= 1;
  if (loadingCount === 0) {
    endLoading();
  }
};

然后在base.helper.js文件中写入如下代码:

import axios from 'axios'
import {
    showLoading,
    hideLoading
} from './loading';

import Qs from 'qs'
const service = axios.create({ //这个service是自定义（你自己起的名字）
    baseURL: 'http://rap2api.taobao.org/app/mock/23080/resources/search', //请求的公共地址
    timeout: 3000, // 请求超时时间
    // headers: {'X-Custom-Header': 'foobar'}
});
// 请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    showLoading();// 开启loading
    // console.log('拦截到了config');
    return config;
}, function (error) {
    // 对请求错误做些什么
    hideLoading();
    return Promise.reject(error);
});
// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        console.log("response", response)
        hideLoading();// 关闭loading
        // console.log('请求回来的数据', res);
        return res;
    },
    error => {
        // TODO 弹窗处理
        alert(error.message);
        hideLoading();// 关闭loading
        return Promise.reject(error)
    }
)

var $http = {
    getData_fob: async function () {
        var res = await service.get()
        console.log("res", res)
    }
}
export default {
    $http
}

最后在组件中使用

<template>
  <div>
    <button @click="toolTest()">工具库测试</button>
  </div>
</template>

<script>
import $tool from '@/api/base.helper'
export default {
  name: "AxiosDemo",
  data(){
    return{
    }
  },
  methods: {
    toolTest(){
      $tool.$http.getData_fob()
    }
  },
};
</script>

<style>
</style>

loading组件转载于：https://blog.youkuaiyun.com/miao_yf/article/details/100727069