fetch的get和post传参

您所在的位置：网站首页 › react的fetch表单post返回405 › fetch的get和post传参

fetch的get和post传参

2023-08-07 20:36| 来源: 网络整理| 查看: 265

原生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还可用于跨域

【本文地址】

fetch的get和post传参

fetch的get和post传参

今日新闻

推荐新闻