fetch

#Scripts #教程

网络请求演变

AJAX -> AXIOS-> fetch

AJAX-> XMLHttpRequest(XHR)
axios -> 封装的 XMLHttpRequest,(XHR)
fetch ->原生js

使用

语法

let request = fetch(url)

封装简单Fetch

interface IFetchError {
  status: 'error'
  message: string
}

const Fetch = <T> (uri: string = 'http://localhost:4000/api/newsList', options: RequestInit={}): Promise<T|IFetchError> => {
  return new Promise(async (resolve, reject) => {
    const response = await fetch(uri, options)
    // 预防空对象,如果是未设置或者是空对象时候设置为默认值
    options.method = options.method ?? 'GET'
    options.headers = options.headers ?? {}
    ;(options.headers! as Record<string, string>)['Content-Type'] = (options.headers! as Record<string, string>)['Content-Type'] ?? 'application/json'

    if (response.ok) {
      resolve(response as unknown as T)
    }
    else {
      return {
	       status: 'error',
		  message: string
      }
    }
  })
}

export default Fetch

取消Fetch请求

新建取消发送网络请求的实例AbortController
配置需要取消的fetch的属性signal
使用方法AbortController()的abort取消发送fetch请求

示例:

const controller = new AbortController()
const { singnal } = controller

if(usr===''){
	window.alert('请输入账密!')

	controller.abort() // 取消fetch请求

	// 订阅取消fetch请求的事件
	singnal.addEventListen('abort',()=>{
		console.log('取消fetch请求')
	})

	// 检查是否取消fetch请求
	console.log(signal.aborted); // true
}

fetch(url,{
	singnal: singnal
})

使用示例:

interface INewsNetData {
  id: string | number
  name: string
  uri: string
}

const response = await Fetch<Array<INewsNetData>>()
const allNewsNetData = await response.json().then((data: { body: INewsNetData }) => data.body)

fetch网络请求

fetch

网络请求演变

使用