Fetch

1.了解Fetch

Fetch被称之为下一代Ajax技术,内部采用Promise方式来处理数据
API语法简洁明了,比XMLHTTPRequest更加简单易用
采用了模块化设计,API分散于多个对象中(如Response对象, Request对象, Header对象)
通过数据流(Stream对象)处理数据, 可以分块读取, 有利于提高网站性能, 对于大文件或者网速慢的场景极为有用

2.使用Fetch

1.使用fetch发送基本的get请求

如果fetch()只接收了一个url字符串参数, 表示默认向该网址发送get请求,会返回一个Promise对象
如果需要设置get的参数,直接拼接到url地址上即可

语法:
fetch(url)
    .then(...)
    .catch(...)

Demo:

<script>
        fetch("http://49.235.40.64:8000/project/231650140")
        // 得到的是response对象,需要通过特定的方法获取其中的内容
        // 通过res.json()取出所有的内容,将其转换成JSON对象,是一个异步操作
            .then(res => {
                return res.json()
            }).then(json => {
                console.log(json)
            }).catch(err => {
                console.log(err)
            })
    </script>

2.async 和 await

async 和 await 是 JavaScript 中用于处理异步操作的语法糖，它们让异步代码的编写和阅读更接近同步代码，避免了“回调地狱”（Callback Hell）和复杂的 .then() 链。

async 的定义与作用

async 是一个关键字，用于声明一个函数是异步的。
在函数声明前加上 async，该函数就变成了 async 函数。

作用：

自动返回 Promise 无论函数内部返回什么，async 函数总是返回一个 Promise 对象。

async function foo() {
  return "hello";
}
// 等价于：
function foo() {
  return Promise.resolve("hello");
}

允许在函数内部使用 await 只有在 async 函数内部，才能使用 await 关键字。

二、await 的定义与作用

定义:

await 是一个关键字，只能在 async 函数内部使用。
它用于等待一个 Promise 被 resolve（或 reject），并获取其结果值。

作用:

暂停函数执行，直到 Promise 完成 await 会让代码“暂停”在这一行，等待异步操作完成，但不会阻塞整个程序（只是暂停当前 async 函数的执行）。
简化 Promise 的使用 无需 .then()，直接用 = await 获取结果。
支持 try/catch 错误处理 异步错误可以用同步风格的 try/catch 捕获。

async function fetchUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json(); // response.json() 也返回 Promise
    console.log(user.name);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

用aysnc和await改写:

 <script>
        // 改写成async await形式
        async function getData(id) {
            try {
                // 获取response对象
                let res = await fetch(`http://49.235.40.64:8000/project/${id}`)

                // 通过res.json()取出结果
                let json = await res.json()
                console.log(json)
            } catch(err) {
                console.log(err)
            }
        }

        getData('231650140')
    </script>

3.Response对象

fetch请求成功以后,得到的是一个Response对象, 它是对应服务器的HTTP响应.

const res = await fetch(url)
console.log(res)

常见属性:

属性	含义
res.ok	返回一个布尔类型,表示请求是否成功
res.status	返回一个数字,表示HTTP回应的状态码(例如200,表示请求成功)
res.statusText	返回状态的文本信息(请求成功之后,服务器返回OK)
res.url	返回请求的url地址

常见方法: Response对象根据服务器返回的不同类型的数据,提供了不同的读取方法,其中最常用的就是res.json

方法	含义
res.json()	得到JSON对象
res.text()	得到文本字符串
res.blob()	得到二进制Blob对象
res.formData()	得到FormData表单对象
res.arrayBuffer	得到二进制ArrayBuffer对象

4.fetch配置参数

fetch的第一个参数是url,此外还可以接收第二个参数作为配置对象,可以自定义发出的HTTP请求,比如fetch(url, options) 其中post,put,patch用法类似,这边以post为例演示

配置参数介绍:

fetch(url, {
    method:'请求方式 post / delete / put',
    headers:{
        'Content-Type':'数据格式'
    },
    body:'post请求体数据'
})

fetch发送post请求:

<script>
    async function addInform() {
        let obj = {
            InformTitle :   'Fetch-POST测试标题',
            InformContent   :   'Fetch-POST测试内容'
        }
        let res = await fetch("http://49.235.40.64:8000/addInform", {
            method:'post',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify(obj)
        })
    }

    addInform()
</script>

数据库效果:

5.Fetch封装函数

原生fetch虽然已经支持promise了,相比XMLHttpRequest已经好用很多,但是参数还是需要自己处理,比如:

get delete 的请求参数,要在地址栏拼接
put patch post 的请求参数, 要转json设置请求头

所以实际工作中,还是会对fetch进行二次封装

目标效果:

// get请求, delete请求
http({
    method:'xxx',
    url:'xxx',
    params:{...}
})

// post请求, put请求, patch请求
http({
    method:'xxx',
    url:'xxx',
    data:{...}
})

实现 (以下只封装了POST和GET两种请求方式, 不能作为全局封装方法) :

async function http(obj) {
    // 首先需要解构参数
    let {method, url, params, data} = obj;
    // 如果有params,需要拼接到url中
    if (params) {
        let str = new URLSearchParams(params).toString();
        url += "?" + str;   // ? 不会被自动拼接
    }

    // 如果有data, 可以直接按照post处理, 否则按照get处理
    let res;
    if (data) {
        res = await fetch(url, {
            method:"post",
            headers:{
                "Content-Type":"application/json"
            },
            body:JSON.stringify(data)
        });
    } else {
        // 按照get处理
        res = await fetch(url);
    }
    return res.json();
}

3.SSH使用密钥连接服务器

3.1 Windows系统

生成自定义密钥对

ssh-keygen -t ed25519 -C "leonsong@IP" -f $env:USERPROFILE\.ssh\tencent_vm_ssh

上传公钥到服务器

scp -O $env:USERPROFILE\.ssh\tencent_vm_ssh.pub leonsong@your_ip:~/

cat tenncent_vm_ssh.pub >> ~/.ssh/authorized_keys
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys"

配置ssh文件

// location
// C:\Users\username\.ssh\config

// 写入
Host home_name
  HostName IP Address
  User your_username
  IdentityFile C:\Users\beeplux\.ssh\tencent_vm_ssh // 指定密钥位置
  IdentitiesOnly yes                             // 只允许密钥登录