fetch 请求的二次封装！！！

已于 2023-06-08 17:14:17 修改
阅读量340 收藏
点赞数 1
文章标签： javascript vue.js
于 2023-06-08 16:38:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60018631/article/details/130966211
版权

废话不多说，直接上干货

先进行正常操作，引入store和Message（我使用的饿了么），并引入自己所定义的prod和dev

然后将 写自己的接口模块并进行导出

因为fetch请求返回的是一个promise，所以这块我使用ansyc awite，当然你也可以.then

 然后咱们后面写接口请求即可

因为需要加上请求超时的时候取消拦截

AbortController()，这个主要用在异步操作中，会给我们提供一个AbortSignal对象，使用AbortController.abort()方法来取消操作，就可以让与之关联的异步操作被终止

 下面我们就可以使用fetch，进行请求数据

 最后使用try catch，轻松完成

try里面放请求成功的数据

 promise.race里面学问挺深的，感兴趣的可你可自己去研究一下，哈哈哈！！

最后你就大展身手，为所欲为

最后不要忘记在catch中判断isTimeout的状态~~~~~~

使用

建一个接口文件

将所有的接口都放在这个文件中

 最后在需要使用的地方引入并使用即可

 

瑞思拜~~~

叽叽喳喳的湫湫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
帝国CMS二次开发之fetch()和fetch1()用法详解
09-29
fetch()和fetch1()是帝国CMS二次开发常用到的函数，下面介绍fetch()和fetch1()正确的写法和一些用处,需要的朋友可以参考下
Fetch的二次封装
qq_40231451的博客
10-16 493
文章目录一、fetch请求的特点二、支持的请求参数三、对fetch进行二次封装 一、fetch请求的特点 服务器只要有返回结果，不论HTTP状态码是多少，promise实例都是fulfilled fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。 通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。 当然它只是一个 HTTP
使用fetch发送post请求
最新发布
weixin_46266464的博客
02-29 1641
在这个例子中，我们定义了一个异步函数sendFormData，它接受一个数据对象作为参数。然后创建一个包含请求方法、头部信息以及请求体的选项对象。根据API的需求，你可以选择不同的’Content-Type’头来匹配发送的数据类型（JSON或URL编码的表单数据）。最后，通过调用fetch函数发起POST请求，并处理响应结果。在使用fetch API进行HTTP POST请求时，需要将请求方法设置为POST，并且通常会携带请求体（包含要发送的数据）。下面对请求方法进行简单封装，以下为封账代码。
fetch二次封装
successLadder的博客
09-02 390
import {fetch as fetchPro} from "whatwg-fetch"; import qs from "qs"; const get = (url,data)=>{ if(data){ let str = ""; for(var key in data){ str += "&"+key+...
Fetch&Fetch的二次封装
每天都要努力学习哦~~
01-23 2119
前言 客户端服务器端通信方式ajax (ajax JQ的类库 /axios类库) /jsonp / fetch fetch是Es6新提供的API:基于不同于​XMLHttpRequest的方式,基于客户端和服务器端的数据通信,而且本身是基于promise管理请求结果的(发送请求返回promi实例) fetch的基础知识和管理 语法: Promise<Response> fetch(input[, init]); :返回promise实例 input:URL地址 init:配置项 ..
对Fetch进行简单的二次封装
博客
01-01 1458
新建HttpUtils.jslet qs = require('qs');export default class HttpUtils { static get(url) { return new Promise((resolve, reject) =&amp;gt; { fetch(url, { credentials: 'include', header
FetchRobotics_FetchRobot_Fetch!_
10-03
Fetch Robot
详解React Native网络请求fetch简单封装
08-29
本篇文章主要介绍了详解React Native网络请求fetch简单封装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
BLE090_PRO_fetch_Fetch!_
09-29
Fetch error error fetch fetch
SQL Fetch Data (GetString).rar_ADO_Fetch!
09-20
ADO数据库编程程序，数据库通讯读取字符串
fetch 的二次封装
qq_56491274的博客
04-08 315
【代码】fetch 的二次封装。
fetch的二次封装
wstomc的博客
03-04 161
在终端中使用 npm i whatwg-fetch -S 命令安装fetch模块 创建 Http.js 文件 import 'whatwg-fetch' export default class Http{ static async request(methods,url,data={}){ if(methods === 'GET'){ let st...
Fetch简单封装
bukaixinjiu_的博客
06-20 2681
Fetch简单封装
fetch封装
diaojw090的博客
03-30 347
1.直接上完整代码 import 'whatwg-fetch' import 'es6-promise' export function get(url) { let result = fetch(url, { method: 'POST', credentials: 'include', headers: { 'Access...
fetch二次封装，基于公司项目
程序员良仔
04-26 741
前言 如果你的公司项目中用的是fetch，那么二次封装fetch是非常有必要的，你就不用再每个组件中引入fetch，设置请求的配置，以及校验后端传回的状态码，再vue中有请求、响应拦截，但可惜的是fetch并没有提供这两个拦截器，所以本文就是相当于封装fetch请求配置，以及实现拦截器功能 目录前言一、使用场景二、使用方法三、总结 一、使用场景 当你需要获取后端数据时，你就可以通过fetch调用接口，发送请求，获取数据 二、使用方法 /* * @Descripttion: fetch请求封装 * @
【Fetch简单封装】
weixin_73656344的博客
06-19 829
1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。2.Fetch标准还定义了Fetch () JavaScript API。3.可用于前后端，数据交互。4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁 ，完成工作所需的实际代码量也更少5.fetch 可自定义是否携带Cookie。6.fetch不像axios需要安装使用，fetch可以直接使用。
二次封装企业级fetch接口请求
takeingloop的博客
01-28 237
在项目初构时，往往需要对接口的请求进行一个统一封装，方便后续共同开发的同时还利于维护。摒弃原有且繁琐的 XMLHttpRequest，采用灵活的 fetch 第三方库，对GET，POST，DELET进行二次封装，以便满足企业级需求。
fetch的封装
weixin_73077230的博客
06-19 744
【代码】fetch的封装。
帮我写一个fetch请求的二次封装
05-05
当然可以，以下是一个基本的 fetch 请求的二次封装的代码示例： ```javascript const request = async (url, options = {}) => { try { const response = await fetch(url, options); const json = await response.json(); if (response.ok) { return json; } throw new Error(json.message); } catch (error) { throw new Error(error.message); } }; export default request; ``` 这个函数接收一个 URL 和一个 options 对象作为参数，并返回一个 Promise。如果请求成功，返回解析后的 JSON 数据；否则，抛出一个包含错误信息的 Error 对象。 你可以在调用这个函数时，传递一个 URL 和一个 options 对象，例如： ```javascript import request from './request'; const fetchData = async () => { try { const data = await request('https://api.example.com/data'); console.log(data); } catch (error) { console.error(error); } }; fetchData(); ``` 以上代码将会使用默认的 GET 方法发送一个请求到 https://api.example.com/data 并且在控制台中输出返回的数据。你还可以传递其他的 options 选项，例如： ```javascript const options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'example', password: 'password' }), }; const data = await request('https://api.example.com/login', options); ``` 这个请求将使用 POST 方法发送一个 JSON 数据到 https://api.example.com/login。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值