fetch封装

最新推荐文章于 2024-05-05 18:36:06 发布
最新推荐文章于 2024-05-05 18:36:06 发布
阅读量236 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46322951/article/details/115560125
版权

1、在src文件夹下新建utils文件夹
2、utils文件夹下创建fetch.js文件
3、fetch.js书写 注意请求的地址 和 请求头 token

import {
    Toast } from 'vant';
//允许同时存在多个 Toast
Toast.allowMultiple();

let dataurl = '/api' // 请求接口地址
const Http = function () {
   
  let DeviceID = localStorage.DeviceID;
  if (!DeviceID) {
   
    // DeviceID = Guid.NewGuid().ToString('D');
    localStorage.DeviceID = DeviceID;
  }
  this.DeviceID = DeviceID;
};

Http.prototype.fetch = function (url, method, params = {
   }) {
   
  url = dataurl + url;
  let config = {
    method: method, mode: 'cors' };
  //判断是否为wx内置浏览器
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
   
    config.headers = {
   
      DeviceType: 'WXH5
最低0.47元/天 解锁文章
正在缓冲 99.9%
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Fetch的二次封装
qq_40231451的博客
10-16 525
文章目录一、fetch请求的特点二、支持的请求参数三、对fetch进行二次封装 一、fetch请求的特点 服务器只要有返回结果，不论HTTP状态码是多少，promise实例都是fulfilled fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。 通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。 当然它只是一个 HTTP
fetch 的二次封装
qq_56491274的博客
04-08 338
【代码】fetch 的二次封装。
Fetch&Fetch的二次封装
每天都要努力学习哦~~
01-23 2222
前言 客户端服务器端通信方式ajax (ajax JQ的类库 /axios类库) /jsonp / fetch fetch是Es6新提供的API:基于不同于​XMLHttpRequest的方式,基于客户端和服务器端的数据通信,而且本身是基于promise管理请求结果的(发送请求返回promi实例) fetch的基础知识和管理 语法: Promise<Response> fetch(input[, init]); :返回promise实例 input:URL地址 init:配置项 ..
fetch 请求的二次封装！！！
weixin_60018631的博客
06-08 376
fetch 请求的二次封装！！！
Nodejs封装fetch方法
yoolika的博客
01-23 1684
框架：nodejs+express+es6 最近把ES5升级成ES6写法 需要用到Babel和webpack Express添加Bable和Webpack方法如下点击这里 ##封装 import fetch from 'node-fetch' export default class BaseComponent{ &nbsp; &nbsp; constructor(){ &nbsp; ...
Fetch简单封装
一个比较懒散的IT男
07-01 334
1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。 2.Fetch标准还定义了Fetch () JavaScript API。 3.可用于前后端，数据交互。 4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁 ，完成工作所需的实际代码量也更少 5.fetch 可自定义是否携带Cookie。 6.fetch不像axios需要安装使用，fetch可以直接使用。......
基于axios封装fetch方法及调用实例
08-28
基于axios封装fetch方法及调用实例 在实际开发中，fetch方法是一个非常常用的数据请求方式，但是它有很多的缺陷，例如不支持jsonp、不支持timeout、不支持cancel等。为了解决这些问题，开发者们通常会对fetch方法...
react-一个基于FetchAPI封装的HTTPClient
08-15
一个基于 Fetch API 封装的 HTTP Client，可用于浏览器及其他兼容环境中，设计之初是为了ReactJS和ReactNative访问后端RestAPI使用...比其他基于Fetch API的封装优势在于，它的中间件机制支持对请求和应答进行异步处理
详解React Native网络请求fetch简单封装
08-29
React Native 网络请求 fetch 简单封装 本篇文章主要介绍了 React Native 网络请求 fetch 的简单封装，旨在提高开发效率和代码质量。在原生应用开发中，为了方便业务开发人员使用，我们一般会对网络库进行一些上传...
JS 封装fetch 上传文件+返回json+返回文件流
菜鸟记录
05-30 2843
⏹封装fetch,实现上传文件+返回json+返回文件流功能
uni-app 安装 uni-app-fetch 进行接口请求的封装
最新发布
qq_52602294的博客
05-05 904
使用 uni-app-fetch 非常的方便
对Fetch进行简单的二次封装
博客
01-01 1473
新建HttpUtils.jslet qs = require('qs');export default class HttpUtils { static get(url) { return new Promise((resolve, reject) =&amp;gt; { fetch(url, { credentials: 'include', header
fetch二次封装，基于公司项目
程序员良仔
04-26 817
前言 如果你的公司项目中用的是fetch，那么二次封装fetch是非常有必要的，你就不用再每个组件中引入fetch，设置请求的配置，以及校验后端传回的状态码，再vue中有请求、响应拦截，但可惜的是fetch并没有提供这两个拦截器，所以本文就是相当于封装fetch请求配置，以及实现拦截器功能 目录前言一、使用场景二、使用方法三、总结 一、使用场景 当你需要获取后端数据时，你就可以通过fetch调用接口，发送请求，获取数据 二、使用方法 /* * @Descripttion: fetch请求封装 * @
react开发利器 之 fetch请求封装
BradenHan的专栏
03-10 2397
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。qs一个带有一些附加安全性的查询字符串解析和字符串化库。为什么封装Fetch请求？总结起来一句话：简单，好用。
fetch的封装
weixin_73077230的博客
06-19 794
【代码】fetch的封装。
js中fetch封装
09-07
在JavaScript中，可以使用fetch函数来进行网络请求。为了更好地封装fetch，可以创建一个自定义的函数来处理常见的请求和响应的逻辑。 以下是一个简单的fetch封装示例： ```javascript function request(url, method, body) { const options = { method: method, headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(body), }; return fetch(url, options) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .catch(error => { console.error('Error:', error); }); } ``` 使用这个封装后的fetch函数，你可以通过以下方式发送GET、POST等请求： ```javascript // 发送GET请求 request('https://api.example.com/data', 'GET') .then(data => { console.log('Response:', data); }); // 发送POST请求 const body = { username: 'john', password: 'secret' }; request('https://api.example.com/login', 'POST', body) .then(data => { console.log('Response:', data); }); ``` 在封装的函数中，我们设置了一些默认的请求头（Content-Type: application/json），并将请求体转换为JSON字符串。然后，使用fetch函数发送网络请求，并处理响应结果。如果响应不成功，会抛出一个错误。你可以根据自己的需求进行适当的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值