此方法是异步请求封装成同步请求,加上token验证,环境试用微信小程序,可以修改文件中的ajax,进行封装自己的,比如用axios等

成功码采用标准的 200 到 300 和304 ,需要可以自行修改

同步任务接入之后,每个任务会进行token的验证,每个任务之间都是同步请求,包括token

/**
* 同步流请求
* token验证每个接口
* 柯里化添加同步任务
* resolve返回res,cb
* reject 返回res,cb
* 通过任务中断测试
* 通过成功失败回调函数测试
*
* 任务流 任务接入柯里化函数 currying(()=>{}) -->
* 开始执行 currying() 进入g函数循环同步执行异步方法 -->
* 执行异步方法 调用 rp 函数 封装 return new promise -->
* rp 函数 执行判断 token 状态 进行处理
*/ const regeneratorRuntime = require('./regenerator-runtime/runtime.js') //runtime类
const errorMessage = '服务繁忙,稍后再试' //公共提示
const successMessage = '完成' //公共提示 class SuperClass {
constructor() {
Object.assign(this, {})
//等待执行的接口
this.wait = []
} //Promise 请求接口
rp(opts, skipToken = false) {
const _t = this,
data = opts.data || {}
//小程序标识
data.source = opts.sourceFlag ? data.source : 1; //请求信息
console.group(`请求接口---${opts.url}`);
console.log('接口信息', {
opts,
skipToken
})
console.groupEnd(); return new Promise(function(resolve, reject) { opts.header = {
"Content-Type": "application/json;charset=utf-8",
//不需要走token的接口
Authorization: !!opts.skipToken ? '' : (wx.getStorageSync('token') || '')
} wx.request({
url: '域名' + opts.url,
data: data,
header: opts.header,
method: opts.method,
dataType: 'json',
responseType: 'text',
success: function(res) {
const {
data
} = res //成功 400为token失效 处理token失效问题 内层函数收集token失败码归并处理
if (data && (_t.successCode({
code: data.code
}) || data.code == 400)) {
resolve(data)
} else {
//其他不可预测为失败
reject(data)
}
},
fail: function(res) {
reject(res.data)
},
complete: function(res) {
//完成停止加载
wx.hideToast()
opts.complete && opts.complete(res.data)
}
})
})
} //为空参数抛异常
paramNoNull() {
throw new Error('Missing parameter')
} // g函数
async g() {
let _t = this,
//中断任务
isbreak = !1 for (let [i, v] of _t.wait.entries()) {
const r = await v().catch((res) => {
//收集 所有的错误 统一执行 提示 或者错误回调
const {
cb,
message
} = res //同步流中断
_t.clearWait()
isbreak = !0;
//没有回调函数执行错误提示
'cb' in res ? cb() : (wx.factory._toast(message || errorMessage))
}) //任务执行成功
if (!!r && r.constructor === Object && !!Object.keys(r).length) {
const {
res: {
code,
data,
message
},
cb
} = r //外层函数只处理成功状态
if (_t.successCode({
code
})) {
!!cb && cb() //同步流执行完成
if ((i + 1) == _t.wait.length) {
_t.clearWait()
wx.factory._toast(message || successMessage)
}
} else {
//同步流中断
_t.clearWait()
isbreak = !0 wx.factory._toast(message || errorMessage)
}
} if (!!isbreak) {
break
}
}
} //清空任务
clearWait() {
this.wait = []
} //柯里化
currying() {
const _t = this
return (function(arg) {
if (arg.length === 0) {
_t.g()
} else {
[].push.apply(_t.wait, arg);
}
})(arguments)
} //成功码
successCode({
code = 404
}) {
return (code >= 200 && code < 300) || code == 304
}
} //超类,实现多继承
const decorator = Sup => class extends Sup {
constructor(...args) {
super(...args)
} //获取token接口
greatetoken(opts) {
let codeOPts = JSON.parse(JSON.stringify(opts));
codeOPts.url = `/getToken`
codeOPts.method = `POST`
codeOPts.data = {
appIds: "xx",
userId: 5
}
return super.rp(codeOPts, true).then((res) => {
const {
code,
data
} = res
if (super.successCode({
code: cb.code
})) {
if (!!data && !!data.token) {
//全局token存储 方式为 storage
wx.setStorageSync('token', data.token)
} else {
wx.factory._toast('获取token失败')
}
} else {
wx.factory._toast('获取token失败')
}
}).catch(() => {
wx.factory._toast('获取token失败')
})
} /**
* 接口公共类
* 同步请求返回 Promise
* 请求 token 为前提,为空 过期重新请求
*/
async send(opts) {
const token = wx.getStorageSync('token'),
sendFun = (opts) => { //转化http请求 catch捕获promise的reject 展示接口级别错误 只做console打印 其他操作流入g函数(回调,提示)
return super.rp(opts).catch(res => { //此处显示rp reject 报错
console.group(`%c请求接口---${opts.url}---报错`, 'color:red;');
console.log(` --> 参数`, {
data: opts.data
});
console.log(` --> 返回值`, {
res
});
console.groupEnd(); //把错误信息传到 g 函数的catch里面
opts.fail && opts.fail(res)
})
},
successFun = async(opts) => {
const cb = await sendFun(opts) //把成功信息传到g函数里面
super.successCode({
code: cb.code
}) && opts.success && opts.success(cb)
} if (!opts.skipToken) { //需要token请求
if (!token) { //token为空 直接发起token请求
await this.greatetoken(opts)
await successFun(opts)
} else {
const cb = await sendFun(opts)
if (!!cb) { //400 token过期 只有在存在token的情况下才会有时效的情况 归并处理
if (cb.code == 400) {
await this.greatetoken(opts)
await successFun(opts)
} else {
//把成功信息传到g函数里面
super.successCode({
code: cb.code
}) && opts.success && opts.success(cb)
}
}
}
} else {
await successFun(opts)
}
} post(opts) {
opts.method = "POST";
this.send(opts)
} get(opts) {
opts.method = "GET";
this.send(opts);
}
} class Http extends decorator(SuperClass) { //子类
constructor() { //继承参数
super()
}
} export default new Http

引入方式,全局调用

import Http from './public/js/request'
wx.http = Http

调用执行,可用bind函数进行传参

success返回为成功的,code值流入任务进行code值判断区分 resolve

fail返回失败 reject

complete执行的为方法

Page({
onLoad(){
wx.http.currying(this.a.bind(this, {
a: 1
}))
//进行传参bind
wx.http.currying(this.b)
wx.http.currying()
},
a() {
const _t = this
wx.factory._toast('加载a信息中...', 6000)
return new Promise((resolve, reject) => {
wx.http.post({
url: 'a',
data: {
"params": {
id:33
}
},
success(res) {
resolve({
res,
cb()=>{}
})
},
fail(res) {
reject({
res,
cb()=>{}
})
}
})
})
},
b() {
const _t = this
wx.factory._toast('加载b信息中...', 6000)
return new Promise((resolve, reject) => {
wx.http.post({
url: 'b',
data: {
id:33
},
success(res) {
resolve({
res
})
},
fail(res) {
reject({
res
})
}
})
})
}
})

javascript 异步请求封装成同步请求的更多相关文章

  1. .NET 同步与异步之封装成Task(五)

    本随笔续接:.NET 实现并行的几种方式(四) 前篇随笔已经介绍了几种可以实现并发的方式,其中异步方法.是最简便的方式.而 异步方式是基于 Task 和 async修饰符和await运算符实现的. 换 ...

  2. 如果将get请求转换成post请求

    td><a href="emp/${emp.id}">Edit</a></td> <form action="" ...

  3. 利用meta标签将http请求换成https请求

    最近网站升级为https之后,为了防止一些http文件没有修改而引起的问题,可以加一个meta标签: <meta http-equiv="Content-Security-Policy ...

  4. Jquey里的同步请求和异步请求

    1.同步请求 发送了同步请求后  会一直等待 先执行 alert("result:" + d); temp = d;   在执行alert("this is last:& ...

  5. jQuery 异步和同步请求

    在jQuery Ajax里面有一个async 参数 , 默认值 为true , 请求为异步请求 , false 为同步请求 .. 使用ajax加载数据返回页面并赋值,然后前端取出该值 这其中涉及到代码 ...

  6. iOS网络编程-ASIHTTPRequest框架同步请求-备用

    在ASIHTTPRequest框架中与HTTP请求相关的类有:ASIHTTPRequest和ASIFormDataRequest,其中最常用的是ASIHTTPRequest,ASIFormDataRe ...

  7. iOS项目开发实战——使用同步请求获取网页源码

    网络请求一般分为同步请求和异步请求,同步请求假设訪问时间过长,会造成界面卡死状态,用户体验不是非常好.可是请求速度较快的话,也能够考虑使用同步訪问.如今先来学习同步訪问. (1)在viewDidLoa ...

  8. ASIHttprequest-创建同步请求

    ASIHttprequest-创建同步请求 当你发送一个同步请求后,该请求会在当前的应用主线程中运行并获取程序的控制权限,也就说你的程序处于锁定的状态,在这个期间,你进行不了任何的操作,直到该请求返回 ...

  9. 深入理解 JavaScript 异步——转载

    本文章转载于深入理解 JavaScript 异步 前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能 ...

随机推荐

  1. JDK源码分析系列---String,StringBuilder,StringBuffer

    JDK源码分析系列---String,StringBuilder,StringBuffer 1.String public final class String implements java.io. ...

  2. 浅入深出Vue:组件

    组件在 vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题. 组件是什么 官方的定义: 组件是可复用的 Vue 实例,并且可带有一个名字. 官方的定义已经非常简明了,组件就是一个实例. ...

  3. 寻觅Azure上的Athena和BigQuery (二):神奇的PolyBase

    前情回顾 在“数据湖”概念与理论逐渐深入人心的今天,面向云存储的交互式查询这个需求场景显得愈发重要.这是因为原生的云存储(主要指S3这样的对象存储)既能够容纳大容量的明细数据,又能在性能和成本间取得一 ...

  4. MySQL主从、主主、半同步节点架构的的原理及实验总结

    一.原理及概念: MySQL 主从复制概念 MySQL 主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点.MySQL 默认采用异步复制方式,这样从节点不用一直访问主服务器来 ...

  5. 基于SpringBoot-Dubbo的微服务快速开发框架

    简介: 基于Dubbo的分布式/微服务基础框架,为前端提供脚手架开发服务,结合前一篇--Web AP快速开发基础框架,可快速上手基于Dubbo的分布式服务开发,项目代码: https://github ...

  6. 雅阁微信群、雅阁车友群、十代雅阁交流微信QQ群

    最近一直在关注第十代雅阁,不论是普通汽油版本还是油电混动版本都很不错,在网上看到很多评测文章和视频 后续都会整理发布到微信群中. 由于论坛发帖,博客发文都不是很方便,为了及时沟通,先创建了微信群,方便 ...

  7. TensorFlow高效读取数据的方法——TFRecord的学习

    关于TensorFlow读取数据,官网给出了三种方法: 供给数据(Feeding):在TensorFlow程序运行的每一步,让python代码来供给数据. 从文件读取数据:在TensorFlow图的起 ...

  8. Android 开发感想

    18年从.net转行做安卓开发,现在已经过去一年多了.说一下感想和心得体会! 一.开始 说一下我的经厉,从毕业开始出来工作一直是从事.net方向的开发工作.一开始也是没什么经验,加上也没有其他手艺就找 ...

  9. HTTPS协议学习笔记

    在前一段时间准备面试的时候,面试官反复提到了HTTPS这个协议.我只是单纯的知道,HTTPS是安全的应用层协议 是HTTP更安全的版本,通过对称密钥加密.但是具体的其他的,可能我不太了解.今天就专门抽 ...

  10. [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

    因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...