React封裝fetch的get與post請求

新建http.js文件用來封裝get和post請求

 　　1、封裝get請求

 　　

 　　2、封裝post請求

　　

 　　3、測試

　　首先在其他組件引入，注意：分析

　　

引入類和方法的區別：
    React等類直接寫即可
    方法需要在外面用{}包圍

　　封裝之前寫法

　　

 

 　　封裝完成后調用httpPost寫法，這里data為對象格式即可

　　

 

 　　get方法與之類似

　　小結：封裝完整代碼如下

// 封裝get請求
export function httpGet(url){
    var result = fetch(url)
    return result
}
// 封裝post請求
export function httpPost(url,data){
    var result = fetch(url,{
        method:'post',
        headers:{
            'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
            'Content-Type':'application/x-www-form-urlencoded'/* 請求內容類型 */
        },
        //data表單數據，body最終要的格式為username=tony&pwd=123456，所以需要格式化
        body:paramsPostBody(data)
    })
    return result
}
//格式化data
function paramsPostBody(obj){
    var result = '';//接受最后結果
    var item;
    for(item in obj){
        result += '&'+item+'='+encodeURIComponent(obj[item])
    }
    if(result){
        result = result.slice(1)//去掉第一個&
    }
    return result
}

 

　　

 

。