接口封装+防抖,手废式接口调用

news/2024/7/24 13:03:33 标签: javascript, 前端, typescript

主要文件包含小程序环境封装,接口文件,request请求封装

环境配置api分类放置
接口封装
env.js文件配置

javascript">'use strict'
/**小程序当前环境develop开发版、trial体验版、release正式版 */
const envVersion = wx.getAccountInfoSync().miniProgram.envVersion;
/**环境配置 */
module.exports = require(`./env.${envVersion === 'release' ? 'prod' : 'dev'}.js`)
// module.exports = require(`./env.${envVersion === 'release' ? 'dev' : 'prod'}.js`)

env.dev.js放置开发配置文件;env.prod.js放置正式环境文件,可用module.exports对外暴露主要前缀接口。

request.js接口封装文件

javascript">/**
 * 封装 http 方法
 * @param {
 *  -  url, 请求地址(必填)
 *  -  data, data 数据
 *  -  headers, 请求头
 *  -  timeout, 请求超时时间(默认 一分钟)
 *  -  method, 请求类型(默认 'GET')
 *  -  encryption, 是否开启数据加密,
 *  -  shark, 接口防抖(防止用户短时间内疯狂调用接口)
 * };
 * @returns Promise<any>;
 */
export const request = async ({
    url,
    data,
    header,
    timeout,
    method,
    shark,
    encryption,
}) => {
    let spendTime = null,sharkTime = 300;shark = shark||false
    return new Promise(resolve => {
        const obj = {
            url: url,
            header: getHeader(),
            timeout: 1000 * 60,
            method: 'GET',
            success: (res) => {
                console.log(res);
                let code = res.data.code;
                //顶号操作,解除手机号绑定
                if (code == 1005 && isStart) {
                    console.log("我顶号了")
                    wxlogin()
                    isStart = false
                    return;
                }
                resolve(res.data);
            },
            fail: (err) => {
                reject({
                    error: err,
                    code: 0
                })
            }
        };
        console.log(data)
        //个人框架所需部分 可跳过 start
        //getUserInfo()改方法封装登录用户的数据,需要时刻直接引用
        if (getUserInfo()) {
            if (data == undefined || data.isUseUser == undefined) {
                data = {
                    ...data,
                    userId: getUserInfo().id,
                }
            } else {
                delete data['isUseUser'];
            }
        }
        clean(data);
        // // if (encryption) {
        // data = en.Encryption(data);
        // // }
         //个人框架所需部分 可跳过 end
        if (data) {
            obj.data = {
                ...data,
            }
        }
        if (header) obj.header = {
            ...obj.header,
            ...header
        };
        if (timeout) obj.timeout = timeout;
        if (method) obj.method = method;
        //防抖操作
        if (shark) {
            spendTime&&clearTimeout(spendTime)
            spendTime = setTimeout(()=>{
                wx.request(obj)
            },sharkTime)
        }else {
            wx.request(obj)
        }

    })

    }
/**获取消息头 */
export const getHeader = () => {
    var header = {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
    };
    let loginToken = wx.getStorageSync('userLoginToken');
    if (loginToken != undefined && loginToken.length > 0) {
        header = {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
            "token": loginToken
        }
    }
    return header;
}
/**
 * 删除空白属性
 * @param {Object} obj  
 */
export const clean = function (obj) {
    for (var propName in obj) {
        if (obj[propName] === null || obj[propName] === undefined) {
            delete obj[propName];
        }
    }
}

api文件示例

javascript">/*! *****************************************************************************
 简历API接口类 ResumeApi.js
***************************************************************************** */
import {
 request,
} from '../utils/request.js'
import { host } from '../config/env';

/**
 * 添加或修改简历
 * @param null
 * @async
 */
export const addOrUpdateResume = async params => await request({ url: `${host}/app/resume/addOrUpdateResumeOne.todo`, data: params, shark:true, method: 'post' });

接口调用部分

javascript">let app = getApp();
import {
  addOrUpdateResume,
} from '../../../api/ResumeApi.js'
  /**
   * 提交
   * async..await 控制同异步 不需要则不加
   */
  async onSaveInfo () {
    wx.showLoading({
      title: '保存中...'
    })
    let that = this, data = that.data.userInfo;
    let UserOpenId = wx.getStorageSync('UserOpenId')
    if(UserOpenId){
        data.openid = UserOpenId 
     }
    await addOrUpdateResume(data).then(res=>{
        wx.hideLoading();
        if(res.code == 200){
          that.showMsg("保存成功!", true)
          setTimeout(() => {
            wx.navigateBack({
              delta: 1,
            })
          }, 1500);
        }
        if(res.code == 300){
          wx.showToast({
            title: res.msg,
            icon:'none'
          })
        }
    
      })
    }
  },

http://www.niftyadmin.cn/n/1250960.html

相关文章

jenkins部署jar

首先在post steps添加执行shell shell脚本 #!/bin/bash cd /home/script/ ./stop.sh ./replace.sh echo "Execute shell Finish" BUILD_IDdontKillMe nohup /home/script/startup.sh & stop.sh #!/bin/bashecho "Stopping helloWord.jar" pidps -ef …

小程序插件构建npm包之引入vant

文章目录问题一&#xff1a;跳转插件一直是失败情况&#xff0c;显示找不到跳转插件的页面问题二&#xff1a;小程序插件报错Cannot read property getSystemInfoSync&#xff1f;问题三&#xff1a;[ "usingcomponents"]["van-button"]: "vant/weapp…

太赞了!华为内部前端开发手册(完整版)开放下载!

最近很多小伙伴找我要一些前端资料&#xff0c;于是我翻箱倒柜&#xff0c;把这份华为大牛总结的前端开发手册文档找出来&#xff0c;同时赠送直播、录播、视频、笔记、源码、价值万元课程笔记&#xff0c;免费共享给大家&#xff01;据说有小伙伴靠这份笔记顺利进入 BAT 哦&am…

SpringBoot部署项目到远程Docker仓库

1.开启远程控制端口 Centos7开启方式&#xff1a; vim /lib/systemd/system/docker.service 找到ExecStart行 ExecStart/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock 重启docker&#xff0c;这里用红色两个命令 systemctl start docker 启…

编写JSONP接口

JSONP的概念与特点 概念&#xff1a;浏览器端通过script标签的src属性&#xff0c;请求服务器上的数据&#xff0c;同时&#xff0c;服务器返回一个函数调用。这种请求数据的方式叫做JSONP。 特点 JSONP不属于真正的Ajax请求&#xff0c;因为它没有使用XMLHttpRequest这个对…

但凡早知道这 28 个网站,都不至于学得那么不扎实

今天来给大家推荐28个辅助你学习巩固知识的网站&#xff0c;让你边玩边学边记&#xff01;本文大致的目录结构如下&#xff1a;CSS相关的学习网站JavaScript相关的学习网站其它学习网站因为这些网站大多都是国外的大佬们做的&#xff0c;所以网页大多都是英文&#xff0c;为了更…

在windows10安装最新版本的MongoDB

首先给出下载地址&#xff1a; MongoDB 预编译二进制包下载地址&#xff1a;https://www.mongodb.com/download-center#community MongoDB Compass 是一个图形界面管理工具&#xff0c;我们可以在后面自己到官网下载安装&#xff0c;下载地址&#xff1a;https://www.mongodb…

encodeURI和encodeURIComponent之间的区别

encodeURI与encodeURIComponent之间的区别和适用场景 相同与不同&#xff1a; encodeURI和encodeURIComponent作用对象都是URL&#xff0c;唯一的区别是编码的字符范围 encodeURI不会对以下字符进行编码ASCII字母 数字 ~!#$&*():/,;?’encodeURIComponent方法不会对以下字…