Fetch

关于fetch:fetch的使用记录

如何用fetch发动post申请上面是一个用fetch发动的post申请示例： fetch('/api/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'tomcat', }),}).then(res => res.json()).then(res => { console.log('res', res);});注意事项：如何传递post参数?设置Content-Type为application/json将post参数转换为字符串，须要用到JSON.stringify如何解析响应？须要对fetch返回的响应调用json办法。因为fetch返回的是一个Response对象，不能间接读取数据，所以须要对其先调用一下json办法，而后能力失去冀望的数据对象。

关于fetch:fetch异步上传图片附htmlJavaScriptphp代码

成果 index.html<!DOCTYPE html><html> <head> <title>图片上传示例</title> <meta charset="utf-8"> <script src="upload.js"></script> <style> *{ padding: 0; margin: 0; } #app{ width: 500px; margin: 100px auto 0; padding: 20px 20px; background: #eee; border-radius: 15px; } </style> </head><body> <div id="app"> <h1>fetch图片上传示例</h1>  <input type="file" id="imageFile" accept="image/*">  <div id="result"></div> </div></body></html>upload.js// 确保JavaScript代码在DOM加载实现后执行document.addEventListener('DOMContentLoaded', function() { // 获取点击上传的按钮 var fileButton = document.getElementById('imageFile'); // 监听抉择文件按钮是否曾经抉择了文件 fileButton.addEventListener('change', function (){ // 获取抉择的文件 var fileSelected = fileButton.files[0]; // 执行上传函数 uploadFile(fileSelected, function(error, response) { if (error) { // 上传文件失败 console.log(error); } else { // 上传文件胜利 var jsonData = JSON.parse(response); console.log(jsonData); // 显示上传后果预览 document.getElementById('result').innerHTML = '<img src="'+jsonData.url+'" width="350" />'; } }); }); // 清空file表单的抉择 fileButton.value = '';})// 上传函数function uploadFile(file, callback) { // 获取表单数据 var formData = new FormData(); formData.append('file', file); // 申请上传服务器 fetch('upload.php', { method: 'POST', body: formData, }) .then(function(response) { return response.text(); }) .then(function(data) { callback(null, data); }) .catch(function(error) { callback(error, null); });}upload.php<?php// 编码header("Content-type:application/json"); // 获取文件$file = $_FILES["file"]["name"]; // 获取文件后缀名$hzm = substr($file,strpos($file,".")); // 设置新文件名$newfile = date("Y-m-d")."-".rand(100,999); // 容许上传的后缀$allowedExts = array("gif", "jpeg", "jpg", "png");$temp = explode(".", $file);$extension = end($temp);if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/jpg")|| ($_FILES["file"]["type"] == "image/pjpeg")|| ($_FILES["file"]["type"] == "image/x-png")|| ($_FILES["file"]["type"] == "image/png"))&& ($_FILES["file"]["size"] < 10485760)&& in_array($extension, $allowedExts)){ // 判断上传后果 if ($_FILES["file"]["error"] > 0){ $result = array( 'code' => 201, 'msg' => '上传失败' ); }else{ // 上传文件 move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$newfile.$hzm); $file_url = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]; $result = array( "code" => 200, "msg" => "上传胜利", "url" => dirname($file_url)."/upload/".$newfile.$hzm ); }}else{ $result = array( 'code' => 202, 'msg' => '此类文件不能上传' );}// 输入JSONecho json_encode($result, JSON_UNESCAPED_UNICODE);?>留神，须要在同一目录下建设upload目录以寄存上传的文件。 ...

关于fetch:Nodejs-支持-fetch-API

最新的 Node.js v17.5 引入了对 fetch API 的反对，对前端同学来说，十分相熟。 fetch() 是一种风行的跨平台 HTTP 客户端 API，可在浏览器和 Web/Service Workers 中运行。尽管目前在 v17.5.0 版本为试验性反对，然而如果在今后的 LTS 版本中正式反对了，就不须要依赖第三方 HTTP 申请模块。 fetch API 提供了 WHATWG 标准接口获取资源，这是一个基于 Promise 的 HTTP 客户端，能够用来简化 HTTP 申请，在浏览器环境已反对，浏览器环境的兼容性实现参考 Web/API/fetch，应用形式与浏览器中应用 Fetch API 统一。 fetch API 次要蕴含以下四个接口： fetch()：该办法是最罕用的，用于发送申请。Headers：相当于 response/request 的头信息，能够使你查问到这些头信息，或者针对不同的后果做不同的操作。Request：相当于一个资源申请。Response：相当于申请的响应。为什么要应用？在 Node.js 中应用 fetch() 的次要起因有两个： Node.js 社区中有一场强烈的探讨，探讨如何以客户端开发者相熟的形式倒退 Node 的 HTTP 堆栈，同时又能与服务器编程模型配合，如何超过目前作为外围局部的 HTTP 模型的限度，以及如何反对 HTTP/2-3 而不适度减轻用户的累赘，而 fetch() 正是这一对话的第一步。fetch() 实现基于 Undici，该我的项目位于 Node.js Github 我的项目组织下，其中的几位贡献者也是 Node.js 我的项目的贡献者，致力于为 Node.js 开发疾速、牢靠且符合规范的 HTTP 客户端，比内置的 HTTP 模块还要快，因为它摒弃了原有的 HTTP 模块，间接构建在 socket 之上。如何应用？目前 Node.js 17.5 中的 fetch() 是一项实验性的性能，运行脚本时须要须要增加 --experimental-fetch，即可在脚本内应用 fetch()。 ...

关于fetch:类和类的继承的简单使用

include <iostream>using namespace std; class Animal {public: Animal(int heigh, int weight)//构造函数{// cout <<"Animal construct"<<endl; } ~Animal()//析构函数{// cout <<"Animal 析构函数 ^_^ " << endl; } void eat() { cout <<"animal eat!" <<endl; } void sleep() { cout <<"animal sleep!" <<endl; } void breakthe() { cout <<"animal breakthe!" <<endl; }}; class fish : public Animal//继承{public: fish() : Animal(400, 300), a(1)//析构函数，对a初始化{// cout <<"fish construct"<<endl; } ~fish() {// cout <<"fish deconstruct"<<endl; ...