[AJAX]使用fetch发送请求

news2024/11/27 20:36:27

fetch是浏览器原生的函数，不需要像原生AJAX新建实例就可以用于发送AJAX请求。

支持Promise获取异步的HTTP响应，和支持流式获取。

服务端代码

// 服务端准备
// 1、引入express
const express = require('express');
// 2、创建应用对象
const app = express()
// 3、创建路由规则
// request是对请求的封装
// response是对响应的封装
app.all('/server',(request,response)=>{
    // 设置响应头：设置运行跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    // 第一步：设置发给客户端的JSON格式数据
    var data={
        code:200,
        msg:"成功"
    }
    // 第二步：由于response.send()只能发送字符串,所以要把JSON转换成字符串
    data = JSON.stringify(data)
    // 第三步：发送数据
    response.send(data);
});
// 4、监听端口的启动服务
app.listen(8000,()=>{
    console.log("服务已启动,8000端口监听中...");
})

// 5、启动服务,终端输入: node server.js基本使用.js ,启动之后在浏览器输入127.0.0.1:8000

客户端代码

fetch('http://127.0.0.1:8000/server', {
        // 请求方法
        method: 'POST',
        // 请求头
        headers: {
            name: 'CUYG'
        },
        // 请求体
        body: 'username=admin&password=admin'
    }).then(res => {
        // 返回的是promise对象
        // console.log(res);
        // 字符串形式
        // console.log(res.text());
        // JSON形式
        console.log(res.json());
    }).catch(err=>{
        console.log(err);
    })