フェッチとパッケージ化の使用

fetch

fetch は es6 の新しい組み込みメソッドで、http リクエストを実装するために使用されます。

let url=""
options={
	body:"",
	method:"post",
 credentials: 'include', 
 // include(同じオリジン（同じオリジンではない）、同じオリジン, *omit((あなたは、リソースの資格情報を運ぶことはできない）
 headers:{
 	'content-type': 'application/x-www-form-urlencoded'
 }
}
fetch(url,options).then(response=>{
	console.log(response.json())
}).catch(reason=>{
	
})

ラッピングフェッチ

まず第一に、我々はクロージャにカプセル化されたメソッドを置く必要があります外部の影響から保護するために、メソッドの要求をリークし、要求オブジェクトのdefautls属性を追加し、デフォルト値を設定するために使用され、要求メソッドを呼び出すには、デフォルト値と新しいオプションのマージにinitOptionsメソッドを介して、オプションの設定項目を渡すには、フェッチメソッドのURLとオプションを取得するオプションを使用して、ステータスを介して、対応する値を受信するために使用するかどうかを判断するために、さらに操作の対応する成功。urlとオプションでフェッチメソッドを取得するオプションを取得し、その後の操作の対応する成功かどうかを判断するためにステータスの値に対応するバックを受信するために使用します。

(function(){
let isOk=/^(2|3)\d{2}$/
let isGet=/^(get|head|detele|options )$/i
//Object.assign浅いマージは、受信オプションにヘッダーがある場合は、最初にヘッダーをマージする必要がある。
function initOptions(options){
	let oldOptions=request.defaults
	if(options.header){
 //ヘッダを処理し、ヘッダをマージし、受信ヘッダに割り当てる。
 	options.header=Object.assign(oldOptions.headers,options.header)
 }
 return Object.assign(oldOptions,options)
}
handleUrl(options){
	let {
 	baseUrl,
 url,
 method,
 body
 }=options
 url=baseURl+url
 if(isGet.test(method)&&body){
 	url=formateUrl(url,body)
 }
 return url
}
handleOptions(options){
	let config={
 	method:options.method,
 credentials:options.credentials,
 headers:options.headers,
 
 }
 if(!isGet.test(options.method)){
 	config.body:options.transform(options.body)
 }
 return config
}
function formateUrl(url,body){
	let str=``
	for(let k in body){
 	str+=`&${k}=${body[k]}`
 }
 str=str.substring(1)
 url=url.includes("?")?url+"&"+str:url+"?"+str
 return url
}
function request(options){
	options=initOptions(options)
 fetch(handleUrl(options),handleOptions(options)).then(response=>{
 	let status=response.status
 if(isOk.test(status)){
 	let result=response.json()
 	switch(options.responseType){
				case "text":
 	result=response.text()
 break;
 case "blob":
 	result=response.blob()
 break;
 	case "arrayBuffer":
 	result=response.arrayBuffer()
 break;
 }
 return result
 }else{
 	switch(status){
				case "404":
 	
 break;
 case "500":
 	
 break;
 	case "401":
 	
 break;
 }
 return Promise.reject("...")
 }
 }).catch(reason=>{
 	if(!window.navigator.onLine){
 	//...
 }
 return Promise.reject()
 })
}
//デフォルトのパラメータを設定する
request.defaults={
	baseUrl:"",
 url:"",
 body:{},
 method:"get",
 credentials: 'include',
 headers:{
 		'content-type': 'application/x-www-form-urlencoded'
 },
 transformRequest:data=>JSON.stringify(data),
 responseType:"json"
}
//apiをエクスポートする
	if(window.window===window){
		window.request=request
	}
	if(typeof module==="object"&& typeof module.exports==="object"){
		module.exports=request
	}
})()