我通过 VSCode 插件 Bito,问chatGPT-4,js如何解析curl?最后顺利帮我实现了一个微信小程序工具!

一、插件Bito,一个号称不需要openAI key 就能玩chatGPT-4 的男人; 1.1 以下是我对它的提问: 通过跟它的聊天,我猜它内部一定实现了这个功能,具体怎么实现的,一顿追问下,代码里面的正则引起了我的注意,并且说出了它的思...

这篇文章已从掘金同步到个人博客,原始发布地址为 掘金原文

一、插件Bito,一个号称不需要openAI key 就能玩chatGPT-4 的男人;

bito介绍.png

1.1 以下是我对它的提问:

20230503214333.png

二、什么是 <a

href="https://link.juejin.cn?target=https%3A%2F%2Feverything.curl.dev%2F" data-ref="nofollow noopener noreferrer" target="_blank" title="https://everything.curl.dev/">curl ?干嘛用的?

-2.1 来看 阮一峰 大佬怎么说的 curl 的用法指南 :curl 是常用的命令行工具,用来请求 Web 服务器。它的名字就是客户端(client)的 URL 工具的意思。如果熟练的话,完全可以取代 Postman 这一类的图形界面工具。curl文档

三、好像在哪里见到过?有种似曾相识的感觉?

curl 'https://mcs.snssdk.com/list' \
  -H 'authority: mcs.snssdk.com' \
  -H 'accept: */*' \
  -H 'accept-language: zh-CN,zh;q=0.9' \
  -H 'content-type: application/json; charset=UTF-8' \
  -H 'origin: https://juejin.cn' \
  -H 'referer: https://juejin.cn/' \
  -H 'sec-ch-ua: "Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36' \
  --data-raw '[{"events":[{"event":"ad_web_block_show","params":"{\"_staging_flag\":0,\"ad_position\":\"creatorhome\",\"ad_url\":\"https://juejin.cn/book/6918979822425210891?utm_source=creator&utm_medium=banner&utm_campaign=xiaoce_LowCode_202304\",\"event_index\":1683096484192}","local_time_ms":1683119960008,"is_bav":1,"ab_sdk_version":"90083871,90081172,90081874","session_id":"5eda070e-4ea9-49f0-be97-303adb6c0134"}],"user":{"user_unique_id":"7078621510457574945","user_id":"3817931570691031","user_is_login":true,"web_id":"7078621510457574945"},"header":{"app_id":2608,"os_name":"windows","os_version":"10","device_model":"Windows NT 10.0","ab_sdk_version":"90083871,90081172,90081874","language":"zh-CN","platform":"Web","sdk_version":"4.2.9","sdk_lib":"js","timezone":8,"tz_offset":-28800,"resolution":"1920x1080","browser":"Chrome","browser_version":"112.0.0.0","referrer":"https://juejin.cn/notification/digg","referrer_host":"juejin.cn","width":1920,"height":1080,"screen_width":1920,"screen_height":1080,"utm_source":"juejingwdhl","custom":"{\"student_verify_status\":\"not_student\",\"user_level\":3,\"profile_id\":\"3817931570691031\"}"},"local_time":1683119960}]' \
  --compressed

image.png

image.png

四、js解析过程

let { detail: { value } } = e;
    let curlCmd = value;
    let { urlForm } = this.data;
    // 1.以换行空格,切割成一个数组
    let lines = curlCmd.split(/\r?\n/);
    // 2.匹配单引号中间关键信息
    let regex = /'~?.+'/g;
    // let method = "";
    let headers = [];
    // let data = "";
    let url = "";
    // 3.数组的每一项内容都是独立的
    lines.map((line) => {
      if (regex.test(line)) {
        // 4.去除将单引号,避免干扰后续的提取
        let line_str = line.match(regex)[0].replace(/\'/g, "");
        let headerStr = line_str.split(":", 2);
        // 5.带curl的为http 内容;
        if (line.indexOf("curl") !== -1) {
          url = line_str;
        } else if (line.indexOf("data-raw") !== -1) {
          // 6.带data-raw 暂且设置为post请求方式,其他请求方式一样的提取方式
          urlForm.body = line_str;
          this.setData({
            requestValue: "POST",
            urlForm: urlForm,
          });
        } else if (headerStr) {
          // 7.将文本以 : 分隔成2部分作为键值,同时去除多余 ' :
          let headerKey = line_str.match(/~?.+: /g)[0].replace(/\: /g, "");
          let headerValue = line_str.match(/: ?.+/g)[0].replace(/\: /g, "");
          headers.push({
            key: headerKey,
            value: headerValue,
          });
        }
      }
    });
    urlForm.header = headers;
    this.setData({
      requestUrl: url,
      urlForm: urlForm,
    });

cuel解析小帮手.gif

五、为什么要解析它?用postMan解析不行嘛?

fc8085160e757c438fced96f07307c1.jpg