原生js 封裝get ,post, delete 請求的實例
現(xiàn)在的項目中都在用VUE 以及react 等MVC, MVVM 框架。 丟棄了原始的JQ 。不可能為了個$.ajax();而把JQ引進(jìn)來吧。
在vue1的開發(fā)中 提供了 vueResouce, vue2 出來后明確提出了不在更新vueResouce 而提供axios 的方法。
在react 的開發(fā)中提供fetch 封裝的方法。等等。但在工作與后臺的交互中基本都是form表單的形式。于是自己封裝了個
POST,GET,DELETE 的請求方式。當(dāng)然根據(jù)不同的公司,不同的方式。都可以自己擴(kuò)展。目前這個只是針對自己所在公司而已。
function api(url,opt,methods) { return new Promise(function(resove,reject){ methods = methods || 'POST'; var xmlHttp = null; if (XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); }; var params = []; for (var key in opt){ if(!!opt[key] || opt[key] === 0){ params.push(key + '=' + opt[key]); } }; var postData = params.join('&'); if (methods.toUpperCase() === 'POST') { xmlHttp.open('POST', url, true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); xmlHttp.send(postData); }else if (methods.toUpperCase() === 'GET') { xmlHttp.open('GET', url + '?' + postData, true); xmlHttp.send(null); }else if(methods.toUpperCase() === 'DELETE'){ xmlHttp.open('DELETE', url + '?' + postData, true); xmlHttp.send(null); } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { resove(JSON.parse(xmlHttp.responseText)); } }; }); } export default api;
以上這篇原生js 封裝get ,post, delete 請求的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript??际謱戭}之柯里化與數(shù)組扁平化的實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript??际謱戭}中柯里化與數(shù)組扁平化、數(shù)組去重的實現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12DataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實例
下面小編就為大家?guī)硪黄狣ataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07淺談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能,結(jié)合實例形式分析了微信小程序頁面下拉刷新和上拉加載相關(guān)事件監(jiān)聽與功能實現(xiàn)操作技巧,需要的朋友可以參考下2018-12-12javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JS使用面向?qū)ο蠹夹g(shù)實現(xiàn)的tab選項卡效果示例
這篇文章主要介紹了JS使用面向?qū)ο蠹夹g(shù)實現(xiàn)的tab選項卡效果,結(jié)合具體實例形式分析了js面向?qū)ο蠹夹g(shù)與tab選項卡功能的具體實現(xiàn)技巧,需要的朋友可以參考下2017-02-02基于JavaScript實現(xiàn)繼承機(jī)制之原型鏈(prototype chaining)的詳解
我們知道在JavaScript中定義類的原型方式,而原型鏈擴(kuò)展了這種方式,以一種有趣的方式實現(xiàn)繼承機(jī)制。prototype 對象是個模板,要實例化的對象都以這個模板為基礎(chǔ)。總而言之,prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例。原型鏈利用這種功能來實現(xiàn)繼承機(jī)制2013-05-05