利用 Promise 实现任务流的自动重试

libo1106

发布于 2018-08-08 16:49:55

1.1K0

发布于 2018-08-08 16:49:55

文章被收录于专栏：Web 开发Web 开发

微信小程序不支持 HTTP 的 cookie ，其会话机制是通过开发自己维护一个 session_id 在小程序的本地存储中，每次调用 wx.request 的时候都带上这个 session_id 来实现的会话机制。

那么，有会话机制，就会存在会话失效、更新等等问题。

传统的 HTTP cookie-session 机制，当会话失效的时候，可以在 HTTP 的返回头里面通过 setcookie 来静默返回一个新的 session_id ，小程序就比较麻烦。

传统的实现方案

1.理想的实现情况

let session_id = wx.getStorageSync('session_id');
 
wx.request({
    url: '/api/create',
    header: {session_id},
    method: 'POST',
    data: 'hello world',
    success: (resp) => {
        let {id} = resp.data;
        // 创建成功后，跳转去目标页面
        wx.navigateTo({url: `/article?id=${id}`})
    }
})

2.为了容错，我们会添加返回判断，但错误的时候，再调用一次

// 调用创建接口
function create() {
 
    let session_id = wx.getStorageSync('session_id');
 
    wx.request({
        url: '/api/create',
        header: {session_id},
        method: 'POST',
        data: 'hello world',
        success: (resp) => {
    
            let {status, data} = resp;
    
            if (status === 'session_id error') {
                // 与后端通信，重新下发并更新本地存储中的 session_id
                // 然后再重新自行一次创建行为
                updateSession().then(create);
            } else {
                let {id} = resp.data;
 
                // 创建成功后，跳转去目标页面
                wx.navigateTo({url: `/article?id=${id}`})
            }
        }
    })
}

上面这种方式，在接口的返回值中做一次判断，然后再执行一次，好像就解决问题了。

但如果我们业务的接口非常多，返回判断是不是要添加很多次呢？

基于 Promise 的任务流自动重试

首先，我们先封装一个专门用来发请求的函数，并且全局套上一个会话异常的逻辑

/util/request.js

// 通用请求函数
export function request (obj) {
 
    let session_id = wx.getStorageSync('session_id');
 
    return new Promise((resolve, reject) => {
 
        obj.header = {session_id};
 
        obj.success = (resp) => {
            resp.reqObj = obj;
            resolve(resp);
        }
 
        obj.fail = (resp) => {
            resp.reqObj = obj;
            reject(resp);
        }
 
        // 发出请求
        wx.request(obj);
 
    }).then(session_error)
 
}
 
// 会话异常处理
export function session_error (resp) {
 
    let {status} = resp.data;
 
    // 如果 session_id 没问题，交给后续流程处理
    if (static !== 'session_id error') {
        return resp;
    }
 
    // 如果 session_id 有问题
    return new Promise((resolve, reject) => {
        // 更新 session_id 
        updateSession().then(() => {
            // 重试之前的请求，并继续原先的流程
            request(resp.reqObj).then(resolve);
        });
    })
 
}

然后，我们的业务逻辑，可以简化为

import { request } from 'util/request';
 
// 请求接口
request({
    url: '/api/create',
    data: 'hello world',
    method: 'POST'
}).then((resp) => {
    let {id} = resp.data;
    // 创建成功后，跳转去目标页面
    wx.navigateTo({url: `/article?id=${id}`})
})

不论我们业务有多少次 HTTP 请求要发送，request 函数都能自动帮我们处理好这些通用流程，且支持自动重试，自动执行原先断掉的流程。

如果是一些非全局处理的逻辑，也可以改用依赖注入的方式，交给业务代码来决定是否调用。

import { request, session_error } from 'util/request';
 
// 创建文章
request({
    url: '/api/create',
    data: 'hello world',
    method: 'POST'
})
.then(session_error)
.then((resp) => {
    let {id} = resp.data;
    // 创建成功后，跳转去目标页面
    wx.navigateTo({url: `/article?id=${id}`})
})
 
// 拉取公告，不需要会话态
request({
    url: '/api/public_msg',
    method: 'GET'
})
.then((resp) => {
    let msg = resp.data;
    msg && wx.showModal({title: '公告', content: msg});
})