fetch的get和post传参

转自 https://blog.csdn.net/dylan_zeng92/article/details/75371034?utm_source=blogxgwz8

原生get请求是在网址链接后加上？key=value&key=value进行传参。原生fetch中一般用法为fetch（url，{配置}).then((res)=>{}).catch((res)=>{}); 
1、其中配置参数一般如下：

method:请求使用的方法，如：POST/GET 
　 headers:请求头信息，可能是字符串，也有可能是Header对象 
　　 body：请求的body信息：可能是Blod/BufferSource/FormData/URLSearchParam或者是字符串;post中传参位置 
mode：请求模式：cors /no-cors/same-origin； 
credentials:请求的credentials 
cache:请求的cache模式：default,no-store,reload,no-cache,force-cache ,only-if-cached

2、then中返回的为一个promise对象 
属性：

res.status (number) - HTTP请求结果参数，在100–599 范围
            res.statusText (String) - 服务器返回的状态报告
            res.ok (boolean) - 如果返回200表示请求成功则为true
            res.headers (Headers) - 返回头部信息，下面详细介绍
            res.url (String) - 请求的地址
    方法：
            res.text() - 以string的形式生成请求text
            res.json() - 生成JSON.parse(responseText)的结果
            res.blob() - 生成一个Blob
            res.arrayBuffer() - 生成一个ArrayBuffer
            res.formData() - 生成格式化的数据，可用于其他的请求
    其他方法：
            clone()
            Response.error()
            Response.redirect()

 

 

实例化一个post传参类型fetch请求

//创建一个配置 
let options = { 
method: 'POST',//post请求 
headers: { 
'Accept': 'application/json', 
'Content-Type': 'application/json' 
}, 
body: JSON.stringify({//post请求参数 
name: 'Hubot', 
login: 'hubot', 
}) 
} 
//新建一个fetch请求 
fetch('/users',options).then((res)=>{ 
if(res.ok){//如果取数据成功 
res.json().then((data)=>{ 
//转化为json数据进行处理 
console.log(data); 
} 
}else{ 
console.log(res.status); 
//查看获取状态 
} 
}).catch((res)=>{ 
//输出一些错误信息 
console.log(res.status); 
})

接下来解决一下get请求传参：

 

1、最简单的方法已知url中不带问号？

fetch(url + "?" + a,{ 
method:'get' 
}).then((res)=>{}).catch((res)=>{}) 

2、万能处理的方法，直接先封装一个函数去判断url中是否存在？

export function  get(url,params){  
        if (params) {  
            let paramsArray = [];  
            //拼接参数  
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))  
            if (url.search(/\?/) === -1) {  
                url += '?' + paramsArray.join('&')  
            } else {  
                url += '&' + paramsArray.join('&')  
            }  
        }  
        //fetch请求  
        fetch(url,{  
            method: 'GET',  
        })  
            .then((response) => {}).catch((error) => {  
                alert(error)  
            })  
    }  

此外fetch中间件fetchjsonp还可用于跨域