fetch的get和post传参
转⾃
原⽣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对象
属性：
1res.status (number) - HTTP请求结果参数，在100–599 范围
fetch最佳用法
2            res.statusText (String) - 服务器返回的状态报告
3            res.ok (boolean) - 如果返回200表⽰请求成功则为true
4            res.headers (Headers) - 返回头部信息，下⾯详细介绍
5            res.url (String) - 请求的地址
6⽅法：
7            () - 以string的形式⽣成请求text
8            res.json() - ⽣成JSON.parse(responseText)的结果
9            res.blob() - ⽣成⼀个Blob
10            res.arrayBuffer() - ⽣成⼀个ArrayBuffer
11            res.formData() - ⽣成格式化的数据，可⽤于其他的请求
12其他⽅法：
13            clone()
14            ()
15            direct()
实例化⼀个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中是否存在？
1export function  get(url,params){
2        if (params) {
3            let paramsArray = [];
4            //拼接参数
5            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
6            if (url.search(/\?/) === -1) {
7                url += '?' + paramsArray.join('&')
8            } else {
9                url += '&' + paramsArray.join('&')
10            }
11        }
12        //fetch请求
13        fetch(url,{
14            method: 'GET',
15        })
16            .then((response) => {}).catch((error) => {
17                alert(error)
18            })
19    }
此外fetch中间件fetchjsonp还可⽤于跨域

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。