关于fetch网络请求

Posted 2021-08-11 ~往无前

fetch也是内置的一种发送网络请求的方法，它和xhr的性质一样式window自带的。

优势在于：可以不使用第三方的请求库就可以进行网络请求。

fetch('/api/search/user2?q=${keyword}').then(res=>{
	console.log("联系服务器成功了")
    //这里的 res.json()返回的是一个promise对象
    return res.json()
},
 //error=>{
	//console.log("联系服务器失败了",error)
    //返回一个空的promise，这时候promise的状态一直为pendding，所以不会继续往下进行
    //return new Promise(()=>{})
//}
).then(
    res=>{console.log("获取数据成功"，res)},
   // error=>{console.log("获取数据失败",error)}, 
).catch(
    //统一处理问题
	(error)=>{
        console.log("请求出错",error);
    }
)
//这里的成功和失败，并不是取决于返回数据的问题，而是看是否成功的连上了服务器，连上之后，如果服务器发现所访问的内容是错误的，这时候会触发error回调函数。

上面是用promise方式进行的网络请求处理，接下来使用await的方式进行：

try{
    const response=await fetch("/api/search/users?q=${keyWord}")
	const data=await response.json()
	console.log(data)
}catch(error){
    console.log("请求出错",error)
}

fetch的兼容性不是很好。很多老版本的浏览器可能不支持。所以一般情况下并不使用该方法进行网络请求。