本博客不欢迎:各种镜像采集行为。请尊重国家相关法律法规,大家都是程序员,不要闹得不开心。

如果在十几年前,提到这个ajax的话,那可是个非常高大上的话题。开始的时候,大家的ajax函数都是要写兼容的,对XMLHttpRequest进行多次包装。而在不同的浏览器里面,使用的技术也是不同的。

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - ajax-fetch
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-1)

在后来,jquery这个历史神器出现了,里面包装了$.get$.post等一系列ajax函数。这样的话,写这些ajax请求的时候,就变得容易的多了。近几年,又出现了个axios,随着vue的不断普及而被大家所熟知。

在本文中,苏南大叔要说的是浏览器自带的fetch函数,对标jqueryajax函数或者axios的相关函数。本文测试环境:win10chrome@89.0.4389.114。本文中的范例,是用一个fetch.html去请求一个fetch.php,而fetch.php返回的是json数据。

代码兼容

目前的主流浏览器,除了ie,其他的都是支持fetch()的。下面的图,展示了各大浏览器对fetch()的支持情况,仅供参考。
更多实时的浏览器是否支持测试,可以参考下面这个链接:

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - can-i-use-fetch
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-2)

如果您要写这个fetch的兼容代码,也许下面的代码会有所帮助:

if (!(typeof fetch === "function")){
  //没有fetch函数
}

对于低版本浏览器,本文中暂不做讨论。如果您一定要进行兼容的话,下面有个兼容库(看名字的话,貌似非常官方):

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - fetch-polyfill
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-3)

参数说明

fetch函数是基于promise的,它有几种写法。fetch的参数有2个:

  • 第一个是url地址,
  • 第二个参数可省略,是发送的requestheader信息,比如:最常见的post,就是需要修改第二个参数来实现的。

发送一个get请求(返回值是json格式):

fetch(url)
    .then(function(response) {
        return response.json(); // return到第二个then里面
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(e) {
        console.log("Oops, error");
    });

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - fetch-get
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-4)

发送一个post请求:

var data = {
    name: "sunan",
    age: "18",
};
fetch(url, {
        method: "POST",
        body: new URLSearchParams(data).toString(), //"name=sunan&age=18"
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
    })
    .then(res => res.json())
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    });

利用fetch发送post请求的情况较多,较复杂,这里仅仅做一个范例,后面再另外开文章详细讨论。

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - fetch-post
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-5)

函数变形

因为这个fetch是基于promise的,所以,它还可以有await的表现形式,但并不是很推荐使用,因为asyncawait总是把人绕晕。下面是相关范例代码:

.then形式:

fetch(url)
    .then(function(response) {
        return response.json(); // return到第二个then里面
    })
    .then(function(data) {
        console.log(data);
    })
    .catch(function(e) {
        console.log("Oops, error");
    });

不写function.then

fetch(url)
    .then(res => res.json())
    .then(res => {
        console.log(res)
    })
    .catch(function(e) {
        console.log("Oops, error");
    });

await形式:

(async () => {
    const res = await fetch('fetch.php');
    const json = await res.json();
    console.log(json);
})();

苏南大叔:JavaScript,浏览器自带的ajax函数fetch如何使用? - fetch-await
JavaScript,浏览器自带的ajax函数fetch如何使用?(图6-6)

相关链接

总结

这个fetch函数,也不是一篇两篇文章能够讲清的。本文中,苏南大叔仅描述了两种基本写法:.thenawait。再描述一下最常见的getpostfetch是如何发送的。

一些特殊的fetch函数使用方法,请参考后续苏南大叔的相关文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

本站的忠实读者小伙伴,正在阅读下面这些文章: