专栏首页电光石火微信小程序wx.request重写

微信小程序wx.request重写

https://www.jb51.net/article/164973.htm

一.

请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求。

首先我们通过request拦截器在每个请求头里面塞入token等信息,好让后端对请求进行权限验证。并创建一个respone拦截器,当服务端返回特殊的状态码,我们统一做处理,如未登录网络错误等操作。

二.

1.首先了解小程序官方api-wx.request() ,通过示例可以看出wx.request的参数是一个对象,拥有传输地址,传输内容,响应头,成功失败回调函数等属性和方法,我们可以通过封装相应的响应头和成功失败回调函数达到相应的目的:

// 官方代码示例

wx.request({

url: 'test.php'`, //仅为示例,并非真实的接口地址`

data: {

x: ''`,`

y: ''

},

header: {

'content-type'`: 'application/json' // 默认值`

},

success (res) {

console.log(res.data)

}

fail(res){

console.log(res)

}

})

|

2.封装

封装请求头和返回的状态码(注:具体头需要添加哪些属性,返回的状态码处理,是根据与后台实际沟通所需的参数来制定的)

const app = getApp();

const appid = 'xxxx'`;`

const appSecret = 'xxxxxx'`;`

let ajaxNum = 0;

// 获取accessToken

function getAccessToken(callback) {

wx.request({

url: '/api/Token'`,`

data: {

appid: aesEncrypt(appid),`// aesEncrypt():自定义的用crypto-js.js进行aes加密的方法,这里只需要知道加密了即可,不需要关注此方法`

appSecret: aesEncrypt(appSecret),

},

success: function (res) {

if`(res.statusCode ===200 && res.data.code === 0) {`

let accesstoken = res.data.data.accesstoken;

if (`typeof (callback) === 'function' && accesstoken) {`

callback(accesstoken);

}

}

},

})

}

// 封装request请求

const myRequest = options => {

if`(options) {`

getAccessToken(`function (accesstoken){`

// header 设置Content-Type,accesstoken, usertoken, noncestr, timestamp等信息,与后台协商好

if`(options.header === undefined || options.header === null`) {

options.header = {};

}

options.header[`'Content-Type'] =` `'application/x-www-form-urlencoded; charset=UTF-8';`

// usertoken在登录后保存在缓存中,所以从缓存中取出,放在header

let usertoken = wx.getStorageSync(`'usertoken'`);

if (usertoken) {

options.header[`'usertoken'`] = usertoken;

}

// 自定义getNoncestr()设置随机字符串,getTimestamp()获取时间戳

let noncestr = getNoncestr();

let timestamp = getTimestamp();

// sign进行加密

let sign = getSign(accesstoken, appid, appSecret, noncestr, timestamp);

if (timestamp) {

options.header[`'timestamp'`] = timestamp;

}

if (noncestr) {

options.header[`'noncestr'`] = noncestr;

}

if (sign) {

options.header[`'sign'`] = sign;

}

//url

let baseUrl = config.BASE_HOST;

if (options.url.indexOf(`'http'`) != 0) {

options.url = baseUrl + options.url;

}

// method、data

if (options.method === undefined || options.method === null`) {`

options.method = 'post'`;`

}

if (options.method.toLowerCase() === 'post'`) {`

if`(options.data) {`

let dataStr = JSON.stringify(options.data);

let base64Str = base64Encrypt(dataStr);

options.data = serializeData({ param: base64Str });

}

}

//success

if (options.success && typeof`(options.success) === 'function'`) {

let successCallback = options.success;

options.success = function`(res) {`

// 判断不同的返回码 200/404

if (res.statusCode === 200) {

try {

// 接收的后台数据用自定义base64解密方法解密后转为对象

let str = base64Decrypt(res.data);

let data = JSON.parse(str);

if (parseInt(data.resultCode, 10) === -1) {`//后台商议好的状态码,-2未登录,-1-3后台出错`

console.error(`'网络超时,请稍后重试'`);

} else if (parseInt(data.resultCode, 10) === -3) {

console.error(data.msg);

} else if (parseInt(data.resultCode, 10) === -2){

console.log(`"用户未登录-ajax"`);

}

res.data = data;

//调用自定义的success

successCallback(res);

} catch (e) {

console.error(`'出错了,' + e + ',接口返回数据:' + res.data);`

}

} else if`(res.statusCode === 404) {`

console.log(`'404'`);

}

}

}

//执行微信的请求

wx.request(options);

});

}

}

module.exports = {

myRequest: myRequest

|

页面调用示范(与wx.request传参一致):

const ajax = require(`'ajax.js'`);

ajax.javaRequest({

url: '/xxx'`,`

data: {

xxxx: xxx

},

method: 'POST'`,`

success: res => {

console.log(res, '成功'`)`

}

})

|

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • win10开启Hyper-v 后出现多个虚拟显示器,导致无法使用外接显示器

    似水的流年
  • 无人值守,检测程序正常运行,遇故障则重启服务

    在某些情况下,如系统负载过大server无法申请到内存而挂掉、server底层发生段错误、server占用内存过大被内核Kill,或者被某些程序误杀。那se...

    似水的流年
  • Spring Boot / Spring Cloud 项目中获取本项目端口号

    这是Spring Boot 2.0.0 M1之前获取本项目端口的方法  然而在Spring Boot 2.0.0 M1之后,EmbeddedServletC...

    似水的流年
  • 小程序入口可以被删除或隐藏吗?| 小程序问答 #27

    我们在第 25 期「小程序问答」中,为大家揭秘了「删除小程序之后,会发生的事情」。

    知晓君
  • zookeeper curator使用caches实现各种监听

    1、篇首语 curator是zookeeper的一个高级api开发包。封装了zookeeper众多的recipes,并且实现了一些新的recipes原语,最重要...

    用户1225216
  • 广度优先搜索算法(go)

    广度优先搜索算法(Breadth First Search,缩写为BFS),又译作宽度优先搜索,或横向优先搜索,是一种图形搜索算法。简单的说,广度优先搜索算法是...

    songleo
  • 程序员如何找到好工作?这款小程序帮你忙

    知晓君
  • 当微信小程序遇上TensorFlow:小程序实现

    首先要吐槽一下微信小程序开发工具没有Linux版本,为了开发微信小程序,我不得不搬出我的娱乐机iMac。对着硕大的屏幕,看着如蚂蚁般的文字,真心想问一下,那些使...

    云水木石
  • iOS 开发之路(登陆验证调用WebService)二

        swift3.0下使用Alamofire调用Webservice遇到的一些问题以及解决方案。

    从今若
  • AVFoundation框架解析看这里(3)- 音频AVAudio

    上一章节主要以媒体捕捉以起点,拍摄、保存视频,本章将以音频AVFAudio为重点,主要知识点有:

    sweet说好的幸福

扫码关注云+社区

领取腾讯云代金券