上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

mock.js改造兼容支持异步函数

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5960

    回帖

    6759

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6759

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-2-7 16:02:53 | 显示全部楼层 | 阅读模式

    下断点找一下,可以发现调用我们自己的mock函数处于

            if (this.custom.async) setTimeout(done, this.custom.timeout) // 异步
                else done() // 同步
    
                function done() {
                    that.readyState = MockXMLHttpRequest.HEADERS_RECEIVED
                    that.dispatchEvent(new Event('readystatechange' /*, false, false, that*/ ))
                    that.readyState = MockXMLHttpRequest.LOADING
                    that.dispatchEvent(new Event('readystatechange' /*, false, false, that*/ ))
    
                    that.status = 200
                    that.statusText = HTTP_STATUS_CODES[200]
    
                    // fix #92 #93 by @qddegtya
                    that.response = that.responseText = JSON.stringify(
                        convert(that.custom.template, that.custom.options),
                        null, 4
                    )
    
                    that.readyState = MockXMLHttpRequest.DONE
                    that.dispatchEvent(new Event('readystatechange' /*, false, false, that*/ ))
                    that.dispatchEvent(new Event('load' /*, false, false, that*/ ));
                    that.dispatchEvent(new Event('loadend' /*, false, false, that*/ ));
                }

    可以发现是定时或者非定时然后执行done,done内部执行convert执行到我们的函数

        // 数据模板 => 响应数据
        function convert(item, options) {
            return Util.isFunction(item.template) ?
                item.template(options) : MockXMLHttpRequest.Mock.mock(item.template)
        }
    

    然而不支持async函数,很麻烦...只是同步的伪造数据还好
    如果根据提交参数做异步的获取并且再返回就会不兼容直接变成undefined
    因为done解耦做的还挺好的,所以可以直接改done
    首先把done改成async
    判断结果是否是promise,如果是promise就阻塞一下再继续调用
    图片.png
    然后我们可以改一下convert
    因为async函数得到的是asyncfunction,而原来的是直接判断function是否是’function‘字符串
    所以我们可以修改一下
    图片.png
    目前测试是通的
    图片.png

    修改的函数代码

                if (this.custom.async)
                  setTimeout(() => {
                    done();
                  }, this.custom.timeout);
                // 异步
                else done(); // 同步
                async function done() {
                  that.readyState = MockXMLHttpRequest.HEADERS_RECEIVED;
                  that.dispatchEvent(
                    new Event('readystatechange' /*, false, false, that*/)
                  );
                  that.readyState = MockXMLHttpRequest.LOADING;
                  that.dispatchEvent(
                    new Event('readystatechange' /*, false, false, that*/)
                  );
    
                  that.status = 200;
                  that.statusText = HTTP_STATUS_CODES[200];
                  const likePromise = convert(
                    that.custom.template,
                    that.custom.options
                  );
                  let result = likePromise;
                  if (likePromise.then !== undefined) {
                    result = await likePromise;
                  }
                  // fix #92 #93 by @qddegtya
                  that.response = that.responseText = JSON.stringify(
                    result,
                    null,
                    4
                  );
    
                  that.readyState = MockXMLHttpRequest.DONE;
                  that.dispatchEvent(
                    new Event('readystatechange' /*, false, false, that*/)
                  );
                  that.dispatchEvent(new Event('load' /*, false, false, that*/));
                  that.dispatchEvent(new Event('loadend' /*, false, false, that*/));
                }

    修改convert函数

            // 数据模板 => 响应数据
            function convert(item, options) {
              return Util.type(item.template) === 'function' ||
                Util.type(item.template) === 'asyncfunction'
                ? item.template(options)
                : MockXMLHttpRequest.Mock.mock(item.template);
            }
    
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表