网络请求 获取数据

通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式。 node-fetch是RN推荐的请求方式。 
React Native框架在初始化项目时, 引入了node-fetch包 (因为npm3把依赖全部摊平了,node-fetch就在node_modules目录下)

下面就是项目中引入的node-fetch的源码:

联网

联网分为发送请求和接受响应两步。分开来分析下。

发送请求

发送http/https gong细分一下共有6个步骤 
1. 确定并准备请求地址与协议 
2. 确定请求中的HTTP方法 
3. 准备请求中药传输的消息头 
4. 准备身份验证信息 
5. 确定是否需要携带消息体/参数 
6. 发出消息

我们以查询号码归属地这个地址演示下。 

1. 确定并准备请求地址与协议

请求地址以http/https 开头，为了便于修改地址，通常将地址放在一个变量中。IOS9以上默认无法访问http请求, 具体参考后面的注意事项。

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">let</span> url=`<span class="javascript" style="box-sizing: border-box;">http:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//apis.baidu.com/showapi_open_bus/mobile/find</span></span>`;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

2. 确定请求中的HTTP方法

根据HTTP协议的设计初衷，不同的方法对资源有不同的操作方式： 
+ PUT ：增 
+ DELETE ：删 
+ POST：改 
+ GET：查

最常用的是GET和POST（实际上GET和POST都能办到增删改查） 
如果不指定，默认的方法为GET，当前使用的api接口只支持get请求

<code class="hljs ocaml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> map={
     <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">method</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span>
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

3. 准备请求中药传输的消息头

接下来需要设置请求中需要传输的消息头。消息头分为两种，其中一种是协议规定的标准消息头；另一种是用户自定义的消息头。

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> privateHeaders<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>{
     <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Private-Header'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'values1'</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//自定义消息头</span>
     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//'Content-Type':"text/plain", //设置消息体格式,GET请求不需要设置</span>
     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//'User-Agent':'testAgent',// 如果不设置默认为okhttp/2.5.0</span>
     <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'apikey'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'9dc7ab2f8993b0b215ad8c550e1f4ebe'</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//百度账号的apikey</span>
};
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>headers<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>privateHeaders; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加上自定义消息头</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>follow<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置允许最大的重定向次数,0不允许重定向</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>timeout<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置超时时间,0代表没有</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>size<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//请求回应中消息体最大允许的长度,0没有限制</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

RN支持gzip/deflate格式编码,不需要对此进行设置。RN收到gzip/deflate格式编码会自动转换为普通格式交给开发者。 
消息头是不区分大小写的，如果有大写字母，传输的时候回自动转换为小写。 
key信息请自己注册。

4. 准备身份验证信息

某些Http请求需要加入身份验证信息，比如上面的apikey，有些时候在需要进行身份验证的时候需要两次HTTP请求来完成。

5. 确定是否需要携带消息体/参数

如果需要带消息体，可以通过body配置,GET请求不需要。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">map.body=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">JSON</span>.stringify({
       fistParam:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'yourValue'</span>,
       secondParam:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'yourValue'</span>
});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

POST请求参数是放在消息体中,而GET直接拼装在请求地址后面通过?间隔。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> url=`http:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//apis.baidu.com/showapi_open_bus/mobile/find`;</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'num=13126939916'</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> requestURL=url+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"?"</span>+<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

6. 发出消息

将上述5步联合起来就可以得到发送HTTP或HTTPS的请求片段。如下：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">  componentDidMount() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> url<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">`http://apis.baidu.com/showapi_open_bus/mobile/find`</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'num=13126939916'</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> requestURL<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>url<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"?"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>{
          method:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span>
        };
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> privateHeaders<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>{
          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//  'Private-Header':'values1', //自定义消息头</span>
          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//  'Content-Type':"text/plain", //设置消息体格式,GET请求不需要设置</span>
          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//  'User-Agent':'testAgent',// 如果不设置默认为okhttp/2.5.0</span>
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'apikey'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'9dc7ab2f8993b0b215ad8c550e1f4ebe'</span>
        };
         <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>headers<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span>privateHeaders; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加上自定义消息头</span>
         <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>follow<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置允许最大的重定向次数,0不允许重定向</span>
         <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>timeout<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置超时时间,0代表没有</span>
         <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>size<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//请求回应中消息体最大允许的长度,0没有限制</span>
         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//map.body='this is body';</span>
        fetch(requestURL,<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span>)
            <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>then(
                (result)<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=></span>{
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//接受回应消息处理.</span>
                    console<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(result);
                }
            )
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

注意事项 解决IOS9以上默认不能访问http请求

WWDC 15 提出的 ATS (App Transport Security) 是 Apple 在推进网络通讯安全的一个重要方式。在 iOS 9 和 OS X 10.11 中，默认情况下非 HTTPS 的网络访问是被禁止的。当然，因为这样的推进影响面非常广，作为缓冲，我们可以在 Info.plist 中添加 NSAppTransportSecurity 字典并且将NSAllowsArbitraryLoads 设置为 YES 来禁用 ATS。

找到info.plist文件添加NSAllowsArbitraryLoads

或者直接在xcode中打开ios项目进行配置。

接收响应

当请求成功,会返回一个存储有回应数据的对象

1. type 字符串类型，记录请求类型
2. url 请求地址
3. status 响应码 200代表成功
4. ok 布尔类型，记录是否成功。

fetch方法

fetch 返回的 then 方法有一个 response 参数，它是一个 Response 实例。 Response 有如下方法:

• clone() - 复制一份response
• error() - 返回一个与网络相关的错误
• redirect() - 返回了一个可以重定向至某URL的response.
• arrayBuffer() - 返回一个带有ArrayBuffer的Promise.
• blob() - 返回一个带有Blob的Promise.
• formData() - 返回一个带有FormData的Promise.
• json() - 返回一个带有JSON格式对象的Promise.
• text() - 返回一个带有文本的Promise.

下面就是完整的返回json的例子：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">fetch(requestURL,map)
     .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">then</span><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((result)=>result.json())</span> // 返回带有<span class="hljs-title" style="box-sizing: border-box;">json</span>格式的<span class="hljs-title" style="box-sizing: border-box;">Promise</span>
     .<span class="hljs-title" style="box-sizing: border-box;">catch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((error)=>{   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 捕获错误
           <span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(error);  
     })</span>
     .<span class="hljs-title" style="box-sizing: border-box;">then</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((responseData)=>{   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 输出json数据
           <span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(responseData);
     })</span>;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

完整的例子

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    componentDidMount() {
        <span class="hljs-reserved" style="box-sizing: border-box;">let</span> url=`<span class="javascript" style="box-sizing: border-box;">http:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//apis.baidu.com/showapi_open_bus/mobile/find</span></span>`;
        <span class="hljs-reserved" style="box-sizing: border-box;">let</span> params=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'num=13126939916'</span>;
        <span class="hljs-reserved" style="box-sizing: border-box;">let</span> requestURL=url+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"?"</span>+params;
        <span class="hljs-reserved" style="box-sizing: border-box;">let</span> map={
          <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">method</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span>
        };
        <span class="hljs-reserved" style="box-sizing: border-box;">let</span> privateHeaders={
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'apikey'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'9dc7ab2f8993b0b215ad8c550e1f4ebe'</span>
        };
         map.headers=privateHeaders; <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>加上自定义消息头
         map.follow=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>;<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>设置允许最大的重定向次数,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>不允许重定向
         map.timeout=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>设置超时时间,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>代表没有
         map.size=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>请求回应中消息体最大允许的长度,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>没有限制
        fetch(requestURL,map)
            .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">then</span><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((result)=>result.json())</span> //.<span class="hljs-title" style="box-sizing: border-box;">json</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>
            .<span class="hljs-title" style="box-sizing: border-box;">catch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((error)=>{
                <span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(error);
            })</span>
            .<span class="hljs-title" style="box-sizing: border-box;">then</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((responseData)=>{
                <span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(responseData);
            })</span>;
    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul>

当然也可以用ES2017的语法:

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">async</span> netWork() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> url=`http:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//apis.baidu.com/showapi_open_bus/mobile/find`;</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'num=13126939916'</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> requestURL=url+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"?"</span>+<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">params</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span> {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> response = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">await</span> fetch(requestURL,{
                headers:{
                    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'apikey'</span>:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'9dc7ab2f8993b0b215ad8c550e1f4ebe'</span>
                }
            });
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">let</span> responseJson = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">await</span> response.json();
            console.log(responseJson);
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> responseJson;
        } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span> (error) {
            console.error(error);
        }
    }</code>