原生js 封裝get ,post, delete 請求的實例
更新時間：2017年08月11日 08:19:03 投稿：jingxian
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
現(xiàn)在的項目中都在用VUE 以及react 等MVC， MVVM 框架。 丟棄了原始的JQ 。不可能為了個$.ajax();而把JQ引進來吧。
在vue1的開發(fā)中 提供了 vueResouce, vue2 出來后明確提出了不在更新vueResouce 而提供axios 的方法。
在react 的開發(fā)中提供fetch 封裝的方法。等等。但在工作與后臺的交互中基本都是form表單的形式。于是自己封裝了個
POST,GET,DELETE 的請求方式。當然根據(jù)不同的公司，不同的方式。都可以自己擴展。目前這個只是針對自己所在公司而已。
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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js 獲取掃碼槍輸入數(shù)據(jù)的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-06-06 
本文主要分享了原生JS下拉加載插件的實現(xiàn)代碼。具有一定的參考價值，需要的朋友一起來看下吧
2016-12-12 
bootstrap模態(tài)框跳轉(zhuǎn)到當前模板頁面 框消失了而背景存在問題的解決方法
這篇文章主要介紹了bootstrap模態(tài)框跳轉(zhuǎn)到當前模板頁面，框消失了，而背景依然存在問題的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12 
JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01 
snapshot 翻譯為快照,用于直觀獲取頁面在某個運行時的狀態(tài),本文主要為大家詳細介紹 snapshot 工具實現(xiàn)的原理,以及其在項目中的使用,需要的可以參考下
2023-11-11 
這篇文章主要介紹了JS控制表格實現(xiàn)一條光線流動分割行的方法,實例分析了javascript操作table表格元素的技巧,需要的朋友可以參考下
2015-03-03 
JavaScript輕松創(chuàng)建級聯(lián)函數(shù)的方法示例
級聯(lián)函數(shù)也叫鏈式函數(shù)，方法鏈一般適合對一個對象進行連續(xù)操作
(集中在一句代碼)。一定程度上可以減少代碼量，缺點是它占用了
函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。
2017-02-02 
Javascript和Java獲取各種form表單信息的簡單實例
本篇文章主要是對Javascript和Java獲取各種form表單信息的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02 
bootstrap-fileinput是基于bootstrap的上傳控件。此控件在網(wǎng)上可以找到很多例子，接下來通過本文給大家分享bootstrap fileinput的使用教程，非常不錯，感興趣的朋友一起看看吧
2016-12-12