Fetch简单封装

2022-06-17 本文已影响0人微笑的弧度_c50f

一、什么是Fetch ？

1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。
2.Fetch标准还定义了Fetch () JavaScript API。
3.可用于前后端，数据交互。
4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁，完成工作所需的实际代码量也更少
5.fetch 可自定义是否携带Cookie。
6.fetch不像axios需要安装使用，fetch可以直接使用。

二、如何使用Fetch

Fetch API 提供了一种全局fetch()方法，该方法位于 WorkerOrGlobalScope 这一个 mixin 中方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

fetch(input?: Request | string, init?: RequestInit): Promise<Response>

fetch(url, options).then(function(response) {
  // 处理 HTTP 响应
}, function(error) {
  // 处理网络错误
})

fetch() 参数

fetch方法可以接收两个参数input和options。

input 参数可以是字符串，包含要获取资源的 URL。也可以是一个 Request 对象。
options 是一个可选参数。一个配置项对象，包括所有对请求的设置。可选的参数有：

method: 请求使用的方法，如 GET、POST、DELETE、PUT等。
headers: 请求的头信息，包含与请求关联的Headers对象。
body: 请求的 body 信息。注意 GET 或 HEAD 方法的请求不能包含 body 信息
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项。

三、常用的fetch请求

html

fetch('/index/fetchHtml')
  .then(res => {
    return res.text() // 定义返回格式。
  }).then(res => {
    document.body.innerHTML += res
  })
  .catch((err) => {
  })

JSON

fetch('请求路径')
  .then((res) => {
    return res.json()
  })
  .then(res => {
    console.log(res)
  })
  .catch((err => {
  }))

POST JSON

fetch('请求路径',{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '张麻子',
    age: '26',
  })
})
  .then((res) => {
    return res.json()
  })
  .then(res => {
    console.log(res)
  })
  .catch((err => {
  }))

4、fetch注意事项

1. 错误处理

fetch只有在网络错误的情况，返回的promise会被reject。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误，所以Promise的状态为resolve。

2. credentials 设置

fetch可以通过credentials自己控制发送请求时是否带上cookie。credentials可设置为include、same-origin、omit。include为了让浏览器发送包含凭据的请求（即使是跨域源）。如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials: 'same-origin'。要改为确保浏览器不在请求中包含凭据，请使用credentials: 'omit'。

5.fetch简单封装

1.和src同级新建一个api（名字可以随意起）的文件夹，在文件夹里面新建一个request.js （名字可以随意起）文件内容如下：

export default async(url = '', data = {}, type = 'GET') => {
    const baseUrl = "https://api.it120.cc/small4" // 基础路径
    type = type.toUpperCase(); // 请求方式小写转换成大写
    url = baseUrl + url; // 请求地址的拼接

    if (type == 'GET') {
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        })
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }
    let requestConfig = {
        credentials: 'same-origin',
        method: type,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        mode: "cors", // 用来决定是否允许跨域请求  值有 三个 same-origin，no-cors（默认）以及 cores;
        cache: "force-cache" // 是否缓存请求资源 可选值有 default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
    }

    if (type == 'POST') {
        Object.defineProperty(requestConfig, 'body', {
            value: JSON.stringify(data)
        })
    }
    try {
        const response = await fetch(url, requestConfig);
        const responseJson = await response.json();
        return responseJson
    } catch (error) {
        throw new Error(error)
    }
}

6.封装接口

import api from '../request.js';

下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api(`/apigb/v1/component`, params)

export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params,'post')