关于fetch网络请求

Posted 2022-01-31 ~往无前

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