Web

fetch

Posted by Kerwen Blog on July 24, 2020

简介

ECMAScript 2015(ES6) 标准的发布已经三年有余，现代浏览器对ES6语法的支持趋于完善，用Promise对象处理异步请求被越来越多的开发者应用。为了更好地处理异步请求，作为对现有的XMLHttpRequest方法的替代，JavaScript引入了fetch方法，基于Promise处理异步请求。

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。

  1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

  2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const promise = new Promise(function(resolve, reject) {
    // ... some code

    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

promise.then(function(value) {
    // success
}, function(error) {
    // failure
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
实例：

1
2
3
4
5
6
7
8
9

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(100).then((value) => {
    console.log(value);
});

异步加载图片：

1
2
3
4
5
6
7
8

const preloadImage = function (path) {
    return new Promise(function (resolve, reject) {
        const image = new Image();
        image.onload  = resolve;
        image.onerror = reject;
        image.src = path;
    });
};

fetch

fetch接受两个参数，url和init，其中url参数是必须的，而init参数是可选的。
url参数是一个字符串，表示请求的url地址，而init是一个对象，在里面可以对这个请求进行配置，例如设置请求方法，设置请求头等，如果不传入init参数，将会采用默认的配置
返回一个包含Promise对象，在这个对象的resolve方法中可以访问到请求的结果，是一个Response对象

简单实例

用fetch获取github上的json文件，并把它打印出来

1
2
3

fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json')
    .then(res => res.json())
    .then(json => console.log(json))

这里我们调用了then方法2次，在第一个then中，我们得到了一个Response对象，我们调用它的.json()方法，来获取服务器响应中的数据，需要注意的是，res.json()返回的是一个Promise对象，而不是JSON化的数据. 在这个Promise对象的then方法中我们可以访问到被解析成JSON格式的数据，这时候我们才可以使用这些数据，因此要一个Promise链，总共调用两次then方法。

将Json数据显示在HTML中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<h1>Fetch实例</h1>
<div id="container"></div>

function GetData(){
    fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json')
    .then(res => res.json())
    .then(json => {
        const container = document.getElementById('container');
        json.forEach(item => {
            const element = document.createElement('p');
            element.textContent = `${item.name} - ${item.age}岁`;
            container.appendChild(element);
        });
    });
}

GetData();

改成async/await风格:

1
2
3
4
5
6
7
8
9
10
11

async function GetDataAsync(){
    const res = await fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json');
    const json = await res.json();
    const container = document.getElementById('container');
    json.forEach(item => {
        const element = document.createElement('p');
        element.textContent = `${item.name} - ${item.age}岁`;
        container.appendChild(element);
    });
}
GetDataAsync();

用fetch和POST方法提交表单

用JSON的形式提交表单：

1
2
3
4
5
6
7
8

const data = { name: 'Billy', age: 18 };
fetch('https//example.billyzou.com/post', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringfy(data), // "{"name":"Billy","age":18}"
})

用form的格式提交表单：

1
2
3
4
5
6
7
8
9
10
11
12
13

const data = { name: 'Billy', age: 18 };
function formatData(data) {
    const result = Object.entries(data).map(([key, value]) => `${key}=${value}`).join('&');
    return result;
}

fetch('https//example.billyzou.com/post', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formatData(data), // "name=Billy&age=18"
})

注意两种方法中由于数据格式不同

发送带凭据的请求

为了让浏览器发送包含凭据的请求（即使是跨域源），要将credentials: ‘include’添加到传递给 fetch()方法的init对象。

1
2
3

fetch('https://example.com', {
    credentials: 'include'  
})

Reference

ECMAScript 6 入门 - Promise 对象
JavaScript fetch 快速入门
JavaScript使用 Fetch

CATALOG
    FEATURED TAGS
    C++ C# Web Others Python 理财 .Net Core FTBatch MFC WCF Git WPF Electron VS Book AE Other Wix MSI
    FRIENDS