JavaScript Fetch 简单使用指南

17 0 0

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`
`status`	HTTP 状态码，如 `200` 或 `404`
`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 还能接收一个配置对象，下面是一些配置信息的说明：