fetch通信步骤——把ajax封装成fetch方法

Posted 2022-08-11 勇敢*牛牛

因为fetch是promise的类型，所以使用async和await

init();
async function init()
    var res = await fetch("http://10.9.46.184:3000/",
        method:"POST",
        body:"干就完了",
        headers:
            "Content-Type":"application/json"
        
    )
    console.log(res);/* 请求体 */
    console.log(res.headers);/* 获取响应头 */
    for([key,value] of res.headers)/* 遍历响应头 */
        console.log(key,value);
    
    console.log(await res.text());/* 解析服务端响应的文本数据 */

        

把ajax封装成fetch方法

function ajax(url,method='get',body,heaers=method:"GET")
    return new Promise(function(resolve,reject)
        var xhr = new XMLHttpRequest();
        xhr.open(method,url);
        if(headers)
            for(var key in heaers)
                xhr.setRequestHeader(key,heaers[key])
            
        
        body ? xhr.send(body):xhr.send();
        xhr.onreadystatechange=function()
            if(xhr.status===200 && xhr.readyState===4)
                resolve(xhr.response);
            else if(xhr.readyState===4)
                reject(xhr.status);
            
        
        xhr.onerror=function()
            reject(xhr.responseURL+"通信地址错误")
        
    
    )

init();
 async function init()
     var res = await ajax("http://localst:3000",
         method:"POST",
         body:"aaa",
         headers:
             "Content-Type":"appliction/x-www-form-encoded"
         
     )