React函数中多return语句的程序执行逻辑咨询

先贴出要分析的代码：

const result = (input) => {
        return fetch(
            `${url}`
        )
            .then((response) => response.json())
            .then((response) => {
                return {
                    options: response.data.map((city) => {
                        return {
                            value: `${city.latitude} ${city.longitude}`,
                            label: `${city.name}, ${city.countryCode}`,
                        };
                    }),
                };
            });
    };

执行流程拆解 #

• 最外层return：调用result(input)时，函数会立即返回一个Promise对象，同时触发fetch发起异步HTTP请求，函数不会等待请求完成，直接把这个Promise返回给调用方。
• 第一个.then的return：当fetch请求成功获取到服务器响应后，执行这个回调函数，调用response.json()将响应体解析为JSON格式。由于response.json()本身也是一个Promise，这个return会让Promise链进入等待JSON解析完成的状态。
• 第二个.then的return：JSON解析完成后，拿到结构化的response对象，这里return一个包含options属性的新对象。这个对象会成为当前Promise最终的resolved值，后续通过.then链式调用result()时，就能获取到这个处理后的对象。
• map回调里的return：遍历response.data中的每个city元素时，这个return会为每个城市生成一个包含value（经纬度拼接字符串）和label（城市名+国家代码拼接字符串）的对象，所有生成的对象会被收集为数组，作为options属性的值。

整个流程是异步链式执行，所有内部的return都是在对应异步阶段完成后才会触发，不会阻塞主线程。

内容的提问来源于stack exchange，提问作者Pewds Pewds