Fetch 是一个用来异步发送 HTTP 请求的 API,它的功能和 XMLHttpRequest 差不多,能在不刷新网页的情况下和后端进行通信。Fetch 相比 XMLHttpRequest 来说,要更简洁一些。

get 请求

Fetch 发送 get 请求很简单,如下:

fetch('user.json').then(data => {
    return data.json();  //  直接把接收到的内容转换为 JSON 并返回 Promise
}).then(val => {
    console.log(val);  //  在控制台输出请求到的内容
});

其中的 user.json 就是请求地址。可以在 then 方法中接收响应结果,响应结果是一个 Promise 对象。

响应结果又包含一些属性,下面是 响应结果的属性说明:

属性说明
headers请求头
statusText响应文本,成功为 ok
statusHTTP 状态码,如 200404
ok是否成功,成功为 true
url请求的 URL

下面用 Response 的 ok 属性来判断是否成功,如果成功就输出请求到的 JSON,如果失败就输出错误码:

fetch('user.json').then(data => {
    if (data.ok) {
        data.json().then(val => {
            console.log(val);  //  输出求导到的 JSON
        });
    }else {
        console.log('出错了!错误代码:' + data.status);  //  输出错误码
    }
});

Promise 还支持一个 catch 方法,执行出错时就会执行 catch 方法里的回调函数。

fetch('1user.json').then(data => {
    return data.json();  
}).then(val => {
    console.log(val);  //  输出请求到的 JSON
}).catch(error => {
    console.log(error);  //  输出错误信息
});

上面的响应结果如果出错就会执行 catch 方法里的回调函数。

响应结果也包含一些方法,下面是响应结果的方法说明:

方法说明
json()生成包含 JSON 的 Promise
text()生成包含普通字符串文本的 Promise
blob()生成包含 blob 的 Promise
rrayBuffer()生成包含 rrayBuffer 的 Promise
formData()生成包含 formData 的 Promise

post 请求

下面发送一个简单的 post 请求:

fetch('server.php', {
    method: 'post',
    body: 'hello=hello',
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    }
}).then(data => {
    return data.text();
}).then(val => {
    console.log(val);  //  输出请求到的字符串
});

fetch 还能接收一个配置对象,下面是一些配置信息的说明:

选项类型说明
methodstring请求方式 postget
bodystring or FormData or blob要发送的内容
headerobject请求头

上面表格中只包含常用选项,可能不够完整。

如果需要发送 JSON 数据可以先用 JSON.stringify() 把 JSON 转为字符串发送。

发送文件可以使用 FormData

兼容性

下面是 Fetch 的浏览器兼容情况:

浏览器名称浏览器版本
Chrome42
Edge14
Firefox39
Internet Explorer不支持
Opera29
Safari10.1

移动浏览器:

浏览器名称浏览器版本
Android webview42
Chrome for Android42
Firefox for Android39
Opera for Android29
Safari on iOS10.3

浏览器兼容信息来源于 MDN。

相关文章:


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/842/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji
×