惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
宝玉的分享
宝玉的分享
酷 壳 – CoolShell
酷 壳 – CoolShell
T
The Exploit Database - CXSecurity.com
Help Net Security
Help Net Security
腾讯CDC
Project Zero
Project Zero
C
CXSECURITY Database RSS Feed - CXSecurity.com
IT之家
IT之家
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tailwind CSS Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Darknet – Hacking Tools, Hacker News & Cyber Security
L
LINUX DO - 最新话题
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
T
Threatpost
N
News | PayPal Newsroom
C
Cybersecurity and Infrastructure Security Agency CISA
Hacker News - Newest:
Hacker News - Newest: "LLM"
S
SegmentFault 最新的问题
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
P
Proofpoint News Feed
A
Arctic Wolf
B
Blog RSS Feed
Forbes - Security
Forbes - Security
P
Privacy & Cybersecurity Law Blog
Attack and Defense Labs
Attack and Defense Labs
V2EX - 技术
V2EX - 技术
P
Proofpoint News Feed
I
Intezer
Application and Cybersecurity Blog
Application and Cybersecurity Blog
阮一峰的网络日志
阮一峰的网络日志
aimingoo的专栏
aimingoo的专栏
T
Tenable Blog
MyScale Blog
MyScale Blog
U
Unit 42
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
WordPress大学
WordPress大学
W
WeLiveSecurity
D
DataBreaches.Net
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
G
GRAHAM CLULEY
有赞技术团队
有赞技术团队
Martin Fowler
Martin Fowler
罗磊的独立博客
The Last Watchdog
The Last Watchdog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
Vulnerabilities – Threatpost
美团技术团队
Microsoft Security Blog
Microsoft Security Blog

zodream梦想开源/个人编程日记

文件解析笔记-zodream梦想开源/个人编程日记 密码本开发笔记之读写与保存-zodream梦想开源/个人编程日记 SkiaSharp 把 pixel byte[] 转成 SKBitmap-zodream梦想开源/个人编程日记 nas 使用 Docker 安装 gogs-zodream梦想开源/个人编程日记 复制 android 手机中的文件到电脑-zodream梦想开源/个人编程日记 周报:寻找优质的周刊-zodream梦想开源/个人编程日记 开发日志:对Markdown的代码块新增引用来源支持-zodream梦想开源/个人编程日记 周报:怎么写技术类的教程文章-zodream梦想开源/个人编程日记 css display:flex 布局尺寸超出问题-zodream梦想开源/个人编程日记 周报:SEO优化的思考-zodream梦想开源/个人编程日记 Edge 浏览器不适用 Edge Image Viewer 打开图片 -zodream梦想开源/个人编程日记 SEO 学习笔记(一) 内容来源-zodream梦想开源/个人编程日记 PHP 实现双因素身份认证(2FA)-zodream梦想开源/个人编程日记 WPF MVVM 获取List 多选数据-zodream梦想开源/个人编程日记 Burp Suite 抓包-zodream梦想开源/个人编程日记 使用 indexnow 注意事项-zodream梦想开源/个人编程日记 Godot 使用字体图标 例如: Iconfont、FontAwesome-zodream梦想开源/个人编程日记 angular 15 对指定页面进行访问限制-zodream梦想开源/个人编程日记 CSS 使用 column-count 实现瀑布流出现内容分割的解决办法-zodream梦想开源/个人编程日记 input 确认按键事件在手机端不生效-zodream梦想开源/个人编程日记 C# 使用socket 进行通讯-zodream梦想开源/个人编程日记 Maui开发中Windows应用开启管理员权限-zodream梦想开源/个人编程日记 Maui 中自定义控件-zodream梦想开源/个人编程日记 angular 14 使用 ng-template 实现tree 结构显示-zodream梦想开源/个人编程日记 c# 动态安装和卸载dll-zodream梦想开源/个人编程日记 慎用 CompositionTarget.Rendering-zodream梦想开源/个人编程日记 c# 重写 c++ 程序笔记:数据初始化-zodream梦想开源/个人编程日记 源码编译 aseprite-zodream梦想开源/个人编程日记 记录一下字符串分隔split各语言之间的不同-zodream梦想开源/个人编程日记 c# Gzip解码无头内容-zodream梦想开源/个人编程日记 Windows 10 查看内存占用-zodream梦想开源/个人编程日记 UWP 使用 win2d:加阴影-zodream梦想开源/个人编程日记 清除 PowerShell 历史记录-zodream梦想开源/个人编程日记 c# 重写 c++ 程序笔记:遍历-zodream梦想开源/个人编程日记 Net Core 与 UWP 共用类开发-zodream梦想开源/个人编程日记 hashcat(二)找回rar解压密码-zodream梦想开源/个人编程日记 Godot 学习笔记(一)-zodream梦想开源/个人编程日记 angular 12 显示数学公式-zodream梦想开源/个人编程日记 js 监听按键事件-zodream梦想开源/个人编程日记 angular 12 ng-deep 使用注意事项-zodream梦想开源/个人编程日记 angular 12 动画执行完成事件-zodream梦想开源/个人编程日记 angular 12 中单例 Service 的使用-zodream梦想开源/个人编程日记 js 实现一个正则替换-zodream梦想开源/个人编程日记 uwp win2d 使用-zodream梦想开源/个人编程日记 UWP 读取应用内资源-zodream梦想开源/个人编程日记 gin 使用笔记(二)出错点-zodream梦想开源/个人编程日记 gin 使用笔记(一)基础-zodream梦想开源/个人编程日记 angular 关于自定义组件事件传递-zodream梦想开源/个人编程日记 apache 使用gzip 压缩 js、css-zodream梦想开源/个人编程日记 关于内容中的 @用户 加 话题 的一些想法-zodream梦想开源/个人编程日记 Github Host 更改-zodream梦想开源/个人编程日记 OBS-Studio 等录屏软件录制显示器内容的黑屏的解决方法-zodream梦想开源/个人编程日记 angular 11 ngrx/effects 使用理解-zodream梦想开源/个人编程日记 angular 11 ngrx/store 使用理解-zodream梦想开源/个人编程日记 angular 10 直接获取表单值-zodream梦想开源/个人编程日记 htaccess 搭配 angular 10 放在二级目录-zodream梦想开源/个人编程日记 微信小程序跨页面传值-zodream梦想开源/个人编程日记 js 对 FileList 进行文件过滤上传-zodream梦想开源/个人编程日记 angular自定义表单组件支持 formControlName-zodream梦想开源/个人编程日记 flutter CupertinoPicker 使用不显示-zodream梦想开源/个人编程日记 CC协议-zodream梦想开源/个人编程日记 flutter margin 负值实现-zodream梦想开源/个人编程日记 win10添加删除开机自启项-zodream梦想开源/个人编程日记 微信小程序开发记录(一)真机无法进入页面-zodream梦想开源/个人编程日记 flutter 跳转页面操作上一页-zodream梦想开源/个人编程日记 Regex Generator 使用指南-zodream梦想开源/个人编程日记 go init函数-zodream梦想开源/个人编程日记 angular 9 升级 angular 10-zodream梦想开源/个人编程日记 kotlin AndroidManifest 注意事项-zodream梦想开源/个人编程日记 对于zodream 框架的优化的思考-zodream梦想开源/个人编程日记 flutter 页面滚动条-zodream梦想开源/个人编程日记 flutter swiper 使用-zodream梦想开源/个人编程日记 flutter API请求-zodream梦想开源/个人编程日记 网站体检之xss攻击-zodream梦想开源/个人编程日记 GitHub 下载慢怎么办-zodream梦想开源/个人编程日记 小程序商城开发总结-zodream梦想开源/个人编程日记 gulp-vue2mini 更新日志-zodream梦想开源/个人编程日记 UWP TextBlock 换行-zodream梦想开源/个人编程日记 js 数组排序 sort-zodream梦想开源/个人编程日记 抛弃create.js 改用pixi.js-zodream梦想开源/个人编程日记 后台列表页进阶之路-zodream梦想开源/个人编程日记 局域网文件传输工具-zodream梦想开源/个人编程日记 angular9教程之PullToRefresh-zodream梦想开源/个人编程日记 c# 添加防火墙例外端口-zodream梦想开源/个人编程日记 c# 获取局域网ip-zodream梦想开源/个人编程日记 angular9教程之自定义部件及获取页面元素-zodream梦想开源/个人编程日记 netcore 依赖注入 AddTransient、AddScoped、AddSingleton-zodream梦想开源/个人编程日记 createjs 实现封装 drawImage-zodream梦想开源/个人编程日记 笔记(200521)游戏及玩家分类-zodream梦想开源/个人编程日记 关于 MasterDetail 模式页面收集-zodream梦想开源/个人编程日记 怎么写日记(一)格式规范-zodream梦想开源/个人编程日记 angular9教程之路由-zodream梦想开源/个人编程日记 PHP 常用框架-zodream梦想开源/个人编程日记 angular9教程之监听子路由变化-zodream梦想开源/个人编程日记 angular9教程之添加启动加载动画-zodream梦想开源/个人编程日记 angular9教程之分模块开发-zodream梦想开源/个人编程日记 angular9教程之使用-zodream梦想开源/个人编程日记 create.js 开发小游戏(二)蒙版-zodream梦想开源/个人编程日记 createjs 游戏结束后重新开始 Tween 补间动画无效-zodream梦想开源/个人编程日记 SEO(二)关键词优化试验-zodream梦想开源/个人编程日记
小程序Mini-Timer开发(二)http封装-zodream梦想开源/个人编程日记
zodream · 2020-03-30 · via zodream梦想开源/个人编程日记

小程序Mini-Timer开发(二)http封装

基本请求封装 Promise

  1. 普通请求
interface IRequestOption {
    headers?: any;
    mask?: boolean;
    loading?: boolean;
    guest?: boolean; // token失效不自动跳转
}

interface IRequest extends IRequestOption {
    url: string;
    params?: any;  // 拼接到url上
    data?: any;    // post 数据
}

export function request<T>(method: 'OPTIONS'| 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT', requestHandler: IRequest, option?: IRequestOption) {
    if (option) {
        // 多加一个 option 是方便进一步封装传入自定义配置
        requestHandler = Object.assign(requestHandler, option);
    }
    let { url, params, data, headers, mask, loading, guest } = requestHandler;
    if (loading === undefined || loading) {
        // 自动显示加载中
      wx.showLoading && wx.showLoading({title: 'Loading...', mask: mask ? mask : false})
    }
    if (!params) {
        params = {};
    }
    if (!headers) {
        headers = {};
    }
    // 这里可以加入自定义接口appid 和签名
    const token = wx.getStorageSync(TOKEN_KEY)
    if (token) {
        // 加入登录令牌
        headers.Authorization = 'Bearer ' + token;
    }
    return new Promise<T>((resolve, reject) => {
        wx.request({
            url: util.uriEncode(util.apiEndpoint + url, params),
            data: data,
            method: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE'].indexOf(method) > -1 ? method : 'GET',
            header: Object.assign({
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            }, headers),
            success: function (res) {
                const { data, statusCode } = res;
                if (statusCode === 200) {
                    resolve(data as any);
                    return;
                }
                if (statusCode !== 401 || !guest) {
                    // 自动显示错误提示
                    wx.showToast({
                        title: (data as any).message,
                        icon: 'none',
                        duration: 2000
                    });
                }
                if (statusCode === 401) {
                    app && app.setToken();
                    if (!guest) {
                        // 自动跳转到登录页
                        wx.navigateTo({
                            url: '/pages/member/login'
                        });
                    }
                }
                // 处理数据
                reject(res)
            },
            fail: function () {
                reject('Network request failed')
            },
            complete: function () {
                wx.hideLoading && wx.hideLoading()
            }
        })
    });
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980

  1. 上传文件
/**
 * 上传文件
 * @param file 要上传文件资源的路径 (本地路径)
 * @param requestHandler 
 * @param name 上传文件的对应的 key
 */
export function uploadFile<T>(file: string, requestHandler: IRequest, name: string = 'file'): Promise<T> {
    let { url, params, data, headers, mask, loading } = requestHandler;
    if (loading === undefined || loading) {
      wx.showLoading && wx.showLoading({title: 'Loading...', mask: mask ? mask : false})
    }
    if (!params) {
        params = {};
    }
    if (!headers) {
        headers = {};
    }
    // 这里可以加入自定义接口appid 和签名
    const token = wx.getStorageSync(TOKEN_KEY)
    if (token) {
        // 加入登录令牌
        headers.Authorization = 'Bearer ' + token;
    }
    return new Promise<T>((resolve, reject) => {
        wx.uploadFile({
            url: util.uriEncode(util.apiEndpoint + url, params),
            formData: data,
            filePath: file,
            name,
            header: Object.assign({
                'Accept': 'application/json',
            }, headers),
            success: function (res) {
                const { data, statusCode } = res;
                if (statusCode === 200) {
                    resolve(data as any);
                    return;
                }
                wx.showToast({
                    title: (data as any).message,
                    icon: 'none',
                    duration: 2000
                });
                if (statusCode === 401) {
                    app && app.setToken();
                    wx.navigateTo({
                        url: '/pages/member/login'
                    });
                }
                // 处理数据
                reject(res)
            },
            fail: function () {
                reject('Network request failed')
            },
            complete: function () {
                wx.hideLoading && wx.hideLoading()
            }
        })
    });
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

需要的几种请求方式

  1. GET
/**
 * 封装get方法
 * @param url
 * @param data
 * @param loading 是否显示加载中
 * @returns {Promise}
 */
export function fetch<T>(url: string, params = {}, option?: IRequestOption): Promise<T> {
    return request<T>('GET', {
        url,
        params,
    }, option);
}

1234567891011121314

  1. POST
/**
 * 封装post请求
 * @param url
 * @param data
 * @param loading 是否显示加载中
 * @returns {Promise}
 */
export function post<T>(url: string, data = {}, option?: IRequestOption): Promise<T> {
    return request<T>('POST', {
        url,
        data,
    });
}

12345678910111213

  1. PUT

/**
 * 封装put请求
 * @param url
 * @param data
 * @param loading 是否显示加载中
 * @returns {Promise}
 */
export function put<T>(url: string, data = {}, option?: IRequestOption) {
    return request<T>('PUT', {
        url,
        data,
    }, option);
}

123456789101112131415

  1. DELETE
/**
 * 删除请求
 * @param url 
 * @param loading 是否显示加载中
 */
export function deleteRequest<T>(url: string, option?: IRequestOption): Promise<T> {
    return request<T>('DELETE', {
        url,
    }, option);
}

1234567891011

请求头添加

自动添加登录令牌

const token = wx.getStorageSync(TOKEN_KEY)
if (token) {
    // 加入登录令牌
    headers.Authorization = 'Bearer ' + token;
}

123456

响应处理

  1. 对令牌过期的处理

清除token 并跳转登录页面,但是一些页面又不想自动跳转到登录页,所以应该能传入设置

if (statusCode === 401) {
    app && app.setToken();
    wx.navigateTo({
        url: '/pages/member/login'
    });
}

123456

  1. 登录推出的处理

  2. 相应失败的信息弹窗

  3. 请求加载进度的显示

有些地方不需要加载进度条,比如下拉加载更多,静默加载更好,不影响阅读

转载请保留原文链接: https://zodream.cn/blog/id/109.html