PRACTICAL EXAMPLES OF FETCH

fetch examples .js

// GET request with data, JSON response
function getJson(url, params={}){
	var url = new URL(url);
	Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
	return fetch(url)
	.then(res=>res.json())
}

function getText(url, params={}){
	var url = new URL(url);
	Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
	return fetch(url)
	.then(r=>r.text())
}

function postFormData(url, params){
	const formData = new FormData();
	Object.keys(params).forEach(key => formData.append(key, params[key]));
	// to upload a file, use the third param to provide a file name
	// formData.append(param_name, file, file_name);
	return fetch(url, {
		method: 'POST',
		body: formData
	});
}


// POST request with data, JSON response
function postJson(url, params={}){
	var url = new URL(url);
	return fetch(url, {
		method: "POST",
		body: Object.keys(params).map(k=>encodeURIComponent(k)+"="+encodeURIComponent(params[k])).join('&'),
		headers: {"Content-Type": "application/x-www-form-urlencoded"}
	})
	.then(res=>res.json())
}

// Converting object to URLSearchParams for use in get/post
function objToURL(obj) {
	const flatKvp = (k, v) => {
		var res = [];
		if (!k || typeof k !== 'string') return res;
		if (v === false) v = '0';
		if (v === true) v = '1';
		if (Array.isArray(v)) {
			v.forEach(av => {
				res.push(...flatKvp(k + "[]", av));
			});
		} else if ('object' === typeof v) {
			Object.keys(v).forEach(ok => {
				res.push(...flatKvp(k + `[${ok}]`, v[ok]));
			});
		} else {
			res.push({
				k: k,
				v: encodeURIComponent(v)
			});
		}
		return res;
	};
	var params = [];
	Object.keys(obj).forEach(key => {
		flatKvp(key, obj[key]).forEach(kvp => {
			params.push(`${kvp.k}=${kvp.v}`);
		});
	});
	return new URLSearchParams(params.join('&'));
}

// takes an object of arbitrary structure and creates a FormData instance
// Supports File uploads
objectToFormData(obj) {
	const flatKvp = (k, v) => {
		var res = [];
		if (!k || typeof k !== 'string')
			return res;
		if (v === false)
			v = '0';
		if (v === true)
			v = '1';
		if (Array.isArray(v)) {
			v.forEach(av => {
				res.push(...flatKvp(k + "[]", av));
			});
		} else if (!(v instanceof File) && 'object' === typeof v) {
			Object.keys(v).forEach(ok => {
				res.push(...flatKvp(k + `[${ok}]`, v[ok]));
			});
		} else {
			res.push({k, v});
		}
		return res;
	};
	var params = new FormData();
	Object.keys(obj).forEach(key => {
		flatKvp(key, obj[key]).forEach(kvp => {
			if (kvp.v instanceof File) {
				params.append(kvp.k, kvp.v, kvp.v.name);
			} else {
				params.append(kvp.k, kvp.v);
			}
		});
	});
	return params;
}

// POST
fetch("http://example.com/", {
	method: "post",
	body: objToURL(data)
});

// GET
fetch("http://example.com/?"+objToURL(data).toString());