JavaScript Fetch 简单使用指南

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 对象。

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

下面用 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 方法里的回调函数。

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

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 还能接收一个配置对象，下面是一些配置信息的说明：

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

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

发送文件可以使用 FormData 。

兼容性

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

移动浏览器：

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

相关文章：

• AJAX 简单使用教程
• jQuery AJAX 简单使用教程
• 使用AJAX + FormData 无刷新上传文件