class類封裝ajax請求
阿新 • • 發佈:2020-11-01
class Request { constructor(baseURL){ // 基準地址! this.baseURL = baseURL } /** * 封裝的請求方法! * @param {string} url 請求地址 * @param {string} type 請求型別,預設get * @param {object} data 提交的引數 * @param {object} headers 請求頭配置 */ ajax(url, type = "get", data = {}, headers = {}) { if (!url) { throw new Error('請求地址沒有傳入') } type = type.toUpperCase(); if (!['GET', 'POST'].includes(type)) { throw new Error('只支援get和post方式') } if (type === "GET") { // 如果物件是空就不需要處理 let keyarr = Object.keys(data); if (keyarr.length) { // 將物件進行序列化,變成字串 let datastr = ""; for (let k in data) { datastr += k + "=" + data[k] + "&" } datastr = datastr.substring(0, datastr.length - 1) // 拼接到url地址上面 url += "?" + datastr } } return new Promise( (resolve, reject)=>{ let conifg = { method: type, headers } if (type === "POST") { conifg.body = data; } fetch(this.baseURL + url, conifg).then(function (response) { return response.json(); }).then(function (res) { resolve(res) }).catch(function (err) { reject(err) }) }) } /** * get請求 * @param {*} url * @param {*} data * @param {*} header */ get(url, data, header){ return this.ajax(url, "get", data, header) } /** * post請求 * @param {*} url * @param {*} data * @param {*} header */ post(url, data, header){ return this.ajax(url, "post", data, header) } /** * all 請求 同時傳送多個請求 * @param {*} reqArr */ all(reqArr = []){ if (Array.isArray(reqArr)) { // todo 檢查每個值是不是Promise return Promise.all(reqArr) } else { throw new Error('請傳入陣列') } } } // 封裝的請求庫! export default new Request(字首地址);