前言
客户端服务器端通信方式ajax (ajax JQ的类库 /axios类库) /jsonp / fetch
fetch是Es6新提供的API:基于不同于XMLHttpRequest的方式,基于客户端和服务器端的数据通信,而且本身是基于promise管理请求结果的(发送请求返回promise实例)
赶快学习起来吧!上代码~
import qs from 'qs';
import {getToken} from './ayth_login';
import {useCallback} from 'react';
interface IConfig extends RequestInit {
token?:string | null
data?:Record<string,unknown>
}
const baseURL = proccess.env.REACT_APP_BASE_URL;
let controller = AbortControllter
const Http = (url:string,{token,data,...customConfig}:IConfig) => {
if(controller){
controller.abort();
}
controller = new AbortControllter();
const config = {
method : customConfig.method,
headers : {
'content-Type' : 'application/json; charset=utf-8',
Accept: 'application/json',
},
signal:controller.signal,
...customConfig,
}
if(config.method?.toLocaleUpperCase() === 'GET'){
url += `?${qs.stringify(data)}`
}else{
config.body = JSON.stringify(data)
}
return window.fetch(`${baseURL}${url}`,config).then((response)=>{
if(response.status === 401){
return Promise.reject('权限不足!')
}
if(response.status === 200 && response.ok){
return response.json()
}
}).catch((err)=>{
console.log(err)
})
}
export const httpWithTimeout = (...[url,config]:Parameters<typeof Http>) =>{
const timeoutPromise = (timeout:number) =>{
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(new Promise('请求超时',{status:504,statusText:'timeout'}))
},timeout)
})
}
return Promise.race([timeoutPromise(2000), Http(url, config)])
}
export const useHttp = () => {
const token = getToken()
return useCallback(
(...[url, config]: Parameters<typeof Http>) => {
return httpWithTimeout(url, { ...config, token })
},
[token],
)
}
有不正确的地方,希望大家多多指点!