Fetch漫游指南--篇1

最新推荐文章于 2024-08-11 02:49:12 发布

置顶

SaiwenOutMan

最新推荐文章于 2024-08-11 02:49:12 发布

阅读量452

点赞数

分类专栏： node.js javascript 前端文章标签： Fetch ajax javascript

本文链接：https://blog.csdn.net/dk2290/article/details/84590386

版权

本文是Fetch API的入门教程，介绍了Fetch的基本概念、与ajax的区别，通过实例展示了Fetch的GET和POST请求，探讨了Fetch处理文件上传的特点，以及Headers、Body对象的使用。文章还提到了Fetch的特性，如不自动发送cookies，需要手动处理错误状态，并预告了后续篇幅将涉及Fetch的Response对象、自定义request和兼容性解决方案。

摘要由CSDN通过智能技术生成

一.什么是Ftech

“Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。”

简单来说，在前一阶段，我们通常是使用ajax之类的基于XMLHttpRequest来进行发送各种http网络请求，但是由于XHR其自身的局限性,导致在其基础上封装的原生ajax，或是jquery ajax在碰到回调地狱时都会有心无力。为了解决这一问题，也是为了更好拥抱ES6，W3C发布了fetch这一更底层的API(此处有争议，官方认为fetch更底层，更开放，但部分人却认为fetch和HTML5的拖拽API一样浮于表面)。

请注意，fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将resolve的返回值的ok属性设置为false），仅当网络故障时或请求被阻止时，才会标记为 reject。
默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

二.开启Fetch漫游之旅

事先说明一下，本文中服务器由node express提供，如果想运行的话大家可以先把node引擎和npm装起来，该install的依赖install就行了。代码先贴出来把：

const express = require('express');
const bodyParser = require('body-parser');
const static = require('express-static');
const consolidate = require('consolidate');
const path = require('path');
const multer = require('multer');
const fs = require('fs');

var app = express();


//配置模板引擎
app.set("view engine", "html");
app.set("views", path.join(__dirname, "views"));
app.engine("html", consolidate.ejs);

//转发静态资源
app.use("/static", static(path.join(__dirname, "public")));


//解析 request payload数据
app.use(bodyParser.json());
//解析post数据  from-data数据
app.use(
    bodyParser.urlencoded({
   
        extended: false
    })
);

//解析post文件
var objMulter = multer({
   dest:'./public/upload'})
app.use(objMulter.any());

app.get('/', (req, res) => {
   
    res.render('fetch.ejs');
})

app.get('/get', (req, res) => {
   
    res.send('get success');
})

app.post('/post', (req, res) => {
   
    //console.log(req)
    res.send(req.body);
})


app.post('/ajax/post', (req, res) => {
   
    res.send(req.body);
})


app.use('/file', (req, res) => {
   
    var file = req.files[0];
    var old_name = file.path;
    var ext_name = path.parse(file<