使用Fetch发送Ajax请求

很久以前，在JavaScript中发送请求或者获取资源的时候很多人都是用的是jQuery，直到最近一直使用axios，但有的时候不想使用第三方的请求的库，这个时候你可以试试Fetch。

现代浏览器基本上都支持fetch，包括node18以上的版本，除了IE。

曾经的请求方式jQuery

曾经的回忆，jQuery发送get请求：

$.get( "foo.php", function( response ) {
    console.log( response ); // server response
});

后来的axios的get请求代码：

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
    // 处理成功情况
    console.log(response);
})
.catch(function (error) {
    // 处理错误情况
    console.log(error);
})
.then(function () {
    // 总是会执行
});

现代JavaScript的请求

在看看Fetch的get请求代码示例：

<img id="dog" />
<script>
    fetch('https://dog.ceo/api/breeds/image/random')
        .then((res) => {
            return res.json()
        }).then((result) => {
        document.getElementById("dog").src = result.message;
    })
        .catch((err) => {
        })
</script>

这个请求会返回一个图片地址，随机显示一只可爱的狗狗图片。

再试试一个post的请求，这里我们使用https://echo.apifox.com/post这个免费的测试接口，这个接口有两个Body参数 (application/json)：d和dd.

let myHeaders = new Headers();
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://www.apifox.cn)");
myHeaders.append("Content-Type", "application/json");

let raw = JSON.stringify({
    "d": "hello",
    "dd": "world"
});

let requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
};

fetch("https://echo.apifox.com/post", requestOptions)
    .then(response => response.json())
    .then((rest)=>{
        let d = JSON.parse(rest.data);
        console.log(d.d+d.dd) })
    .catch(error => console.log('error', error));

在node环境下，运行脚本，会输出：helloworld。

以上就是fetch的简单用法，fetch使用需要注意的是在node环境中需要18+的版本，现代浏览器除了IE基本上都是支持fetch的。

参考：

fetch()

Fetch_API

Apifox Echo