Javascript HTTP kütüphanesi

Fetch ile php'ye json nesleleri gönderdiğimizde $_POST ile gönderilen datalara erişemiyoruz. Bu kütüphane alışageldiğimiz gibi json nesneleri fetch ile göndererek php tarafında $_POST değişkenini kullanarak verilere erişebilmemize olanak sağlar.

Diğer avantajlarından biri ise çoklu fetch isteklerini tek bir değişken üzerinden yönetmenizi sağlar.

Kendi hazırladığım http kütüphanesi ile fetch işlemlerini yönetebilirsiniz.

Kütüphaneyi aşağıdan kopyalayarak alabilirsiniz.

var recursively = function (element) {
    var name = element.name.match(/[^[\]]+(?=])/g);
    if (name) {
        var prefix = element.name.replace(/\[(.+?)\]/g, "");
        return {
            prefix: prefix,
            name: name[0],
            subname: name[1],
            subname2: name[2],
            value: element.type === 'checkbox' ? element.checked : element.value
        };
    } else {
        return {
            prefix: null,
            name: element.name,
            value: element.type === 'checkbox' ? element.checked : element.value
        }
    }
}

function Serialize(form, rootName = null, ignoreList = null) {
    if (form instanceof HTMLFormElement) {
        var json = {};
        [...form.elements].forEach(element => {
            if (element.name) {
                var data = recursively(element);
                if (data.prefix) {
                    if (typeof json[data.prefix] !== "object") {
                        json[data.prefix] = (Number.isInteger(parseInt(data.name))) ? [] : {};
                    }
                    if (data.subname) {
                        if (data.subname2) {
                            if (typeof json[data.prefix][data.name][data.subname] !== "object") {
                                json[data.prefix][data.name][data.subname] = (Number.isInteger(parseInt(data.subname2))) ? [] : {};
                            }
                            json[data.prefix][data.name][data.subname][data.subname2] = data.value;
                        } else {
                            if (typeof json[data.prefix][data.name] !== "object") {
                                json[data.prefix][data.name] = (Number.isInteger(parseInt(data.subname))) ? [] : {};
                            }
                            json[data.prefix][data.name][data.subname] = data.value;
                        }
                    } else {
                        json[data.prefix][data.name] = data.value;
                    }
                } else {
                    json[data.name] = data.value;
                }
            }
        });
        return json;
    } else {
        var s = [];
        var a = function (k, v) {
            v = typeof v === 'function' ? v() : v;
            v = v === null ? '' : v === undefined ? '' : v;
            s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v);
        };
        var p = function (prefix, obj) {
            var i, len, key;
            if (prefix) {
                if (Array.isArray(obj)) {
                    for (i = 0, len = obj.length; i < len; i++) {
                        p(
                            prefix + '[' + (typeof obj[i] === 'object' && obj[i] ? i : '') + ']',
                            obj[i]
                        );
                    }
                } else if (String(obj) === '[object Object]') {
                    for (key in obj) {
                        p(prefix + '[' + key + ']', obj[key]);
                    }
                } else {
                    a(prefix, obj);
                }
            } else if (Array.isArray(obj)) {
                for (i = 0, len = obj.length; i < len; i++) {
                    a(obj[i].name, obj[i].value);
                }
            } else {
                for (key in obj) {
                    p(key, obj[key]);
                }
            }
            return s;
        };

        return p('', form).join('&');

    }
}

function http() {
    this._requests = [];
}
http.prototype = {
    get(url) {
        var _req = fetch(url).then(e => e.text());
        this._requests.push(_req);
        return _req;
    },
    json(url) {
        var _req = fetch(url).then(e => e.json());
        this._requests.push(_req);
        return _req;
    },
    finish() {
        if (this._requests.length) {
            return Promise.all(this._requests)
        }
    },
    postJson(url, data, headers = {}) {
        var _req = fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                ...headers
            },
            body: JSON.stringify(data)
        });
        this._requests.push(_req);
        return _req;
    },
    post(url, data, headers = {}) {
        if (data instanceof FormData == false) {
            headers = Object.assign(headers, {
                'Content-Type': "application/x-www-form-urlencoded; charset=UTF-8"
            })
        }
        data = (data) ? (data instanceof FormData) ? data : Serialize({
            ...data,
        }) : null;

        var _req = fetch(url, {
            method: 'post',
            body: data,
            headers: new Headers(headers),
        })

        this._requests.push(_req);
        return _req;
    }
}

export {
    http,
    Serialize
};

Örnek Kullanım (Tek İstek)

import { http as HTTP } from "./http.js";

var http = new HTTP();
http
  .post("api.php", {
    op: "update",
    id: 152,
    data: { name: "Yasin", lastname: "Ersoy" },
  })
  .then((e) => e.json())
  .then((a) => {
    console.log(a);
  });

Örnek Kullanım (Çoklu İstek)

var req = new http();

req
  .json("https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json")

req
  .json("https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json")

req
  .json("https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json")

req.finish().then((values) => {
  console.log(values)
});

Methodlar

• .get(url <String>)

  request.get(url) > String

• .json(url <String>)

  request.json(url) > Json Object

• .post(url <String>, data <FormData | FormElement | Object>, headers <Object>)

  request.post(url, { key: value }) > Promise
  request.post(url, { key: value })
      .then(response => response.json())
      .then(response => {
          console.log(response)
      })

• .postJSON(url <String>, data <Object>, headers <Object>)

  request.postJson(url, { key: value }) > Promise
  request.postJson(url, { key: value })
      .then(response => response.json())
      .then(response => {
          console.log(response)
      })

• finish() sadece çoklu isteklerde kullanılmalıdır

  request.finish() > Promise
  
  request.finish().then((values) => {
    console.log(values)
  });

Comments