6、js组件封装(Loading)

1、utils/http 请求数据在这里插入图片描述
2、http代码

import axios from "axios";
import qs from "qs"
const server = axios.create({
    //baseURL:"",
    timeout:5000,
    withCredentials:true
})

server.interceptors.request.use((config)=>{
    if(config.method.toUpperCase() == "GET"){
        config.params = {...config.data}

    }else if(config.method.toUpperCase() == "POST"){
        config.headers["content-type"] = "appliaction/x-form-urlencoded";
    }
    return config;


},(err)=>{
Promise.reject(err);
})


server.interceptors.response.use((res)=>{
    if(res.statusText == "OK"){
        return res.data
        // return res.config
    }
},(err)=>{
    Promise.reject(err);
})



    export default (method,url,data={})=>{
        if(method.toUpperCase() == "GET") {
            return server.get(url,{
                params:data
            })
        }else if(method.toUpperCase() == "POST"){
            return server.post(url,data);
        }
    }

3、输出data数据在这里插入图片描述
4、新建lib/loading/index.vue 将html和css样式放进去
在这里插入图片描述
5、在app里引入loading在这里插入图片描述
6、成功
在这里插入图片描述
7、
在这里插入图片描述
8、在这里插入图片描述
9、输出loading在这里插入图片描述
10、在这里插入图片描述
11、在这里插入图片描述
12、输出一下loading在这里插入图片描述
13、在这里插入图片描述
14、在这里插入图片描述
15、在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
16、在这里插入图片描述
期间遇到的一个问题,页面loading没加载出来在这里插入图片描述
主要原因 fixed固定定位 index权重
在这里插入图片描述
17、handleDestory() Loading不会被加载在这里插入图片描述
18、在这里插入图片描述
19、在这里插入图片描述
删除了红框里的两行在这里插入图片描述在这里插入图片描述
在这里插入图片描述
20、http在这里插入图片描述
21、在这里插入图片描述
最后效果 但是有BUG 在7、里解决
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值