HttpClient

互联网时代，无数服务是基于 HTTP 协议进行通信的，Web 应用调用后端 HTTP 服务是一种非常常见的应用场景。

为此框架基于 urllib 内置实现了一个 HttpClient，应用可以非常便捷地完成任何 HTTP 请求。

通过 app 使用 HttpClient

框架在应用初始化的时候，会自动将 HttpClient 初始化到 app.httpclient。同时增加了一个 app.curl(url, options) 方法，它等价于 app.httpclient.request(url, options)。

这样就可以非常方便地使用 app.curl 方法完成一次 HTTP 请求。

  1. // app.js
  2. module.exports = app => {
  3.   app.beforeStart(async () => {
  4.     // 示例：启动的时候去读取 https://registry.npm.taobao.org/egg/latest 的版本信息
  5.     const result = await app.curl('https://registry.npm.taobao.org/egg/latest', {
  6.       dataType: 'json',
  7.     });
  8.     app.logger.info('Egg latest version: %s', result.data.version);
  9.   });
  10. };

通过 ctx 使用 HttpClient

框架在 Context 中同样提供了 ctx.curl(url, options) 和 ctx.httpclient，保持跟 app 下的使用体验一致。这样就可以在有 Context 的地方（如在 controller 中）非常方便地使用 ctx.curl() 方法完成一次 HTTP 请求。

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async index() {
  4.     const ctx = this.ctx;
  6.     // 示例：请求一个 npm 模块信息
  7.     const result = await ctx.curl('https://registry.npm.taobao.org/egg/latest', {
  8.       // 自动解析 JSON response
  9.       dataType: 'json',
  10.       // 3 秒超时
  11.       timeout: 3000,
  12.     });
  14.     ctx.body = {
  15.       status: result.status,
  16.       headers: result.headers,
  17.       package: result.data,
  18.     };
  19.   }
  20. }

基本 HTTP 请求

HTTP 已经被广泛大量使用，尽管 HTTP 有多种请求方式，但是万变不离其宗，我们先以基本的4个请求方法为例子，逐步讲解一下更多的复杂应用场景。

以下例子都会在 controller 代码中对 https://httpbin.org 发起请求来完成。

GET

读取数据几乎都是使用 GET 请求，它是 HTTP 世界最常见的一种，也是最广泛的一种，它的请求参数也是最容易构造的。

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async get() {
  4.     const ctx = this.ctx;
  5.     const result = await ctx.curl('https://httpbin.org/get?foo=bar');
  6.     ctx.status = result.status;
  7.     ctx.set(result.headers);
  8.     ctx.body = result.data;
  9.   }
  10. }
  • GET 请求可以不用设置 options.method 参数，HttpClient 的默认 method 会设置为 GET。
  • 返回值 result 会包含 3 个属性：status, headers 和 data
    • status: 响应状态码，如 200, 302, 404, 500 等等
    • headers: 响应头，类似 { 'content-type': 'text/html', ... }
    • data: 响应 body，默认 HttpClient 不会做任何处理，会直接返回 Buffer 类型数据。一旦设置了 options.dataType，HttpClient 将会根据此参数对 data 进行相应的处理。

完整的请求参数 options 和返回值 result 的说明请看下文的 options 参数详解 章节。

POST

创建数据的场景一般来说都会使用 POST 请求，它相对于 GET 来说多了请求 body 这个参数。

以发送 JSON body 的场景举例：

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async post() {
  4.     const ctx = this.ctx;
  5.     const result = await ctx.curl('https://httpbin.org/post', {
  6.       // 必须指定 method
  7.       method: 'POST',
  8.       // 通过 contentType 告诉 HttpClient 以 JSON 格式发送
  9.       contentType: 'json',
  10.       data: {
  11.         hello: 'world',
  12.         now: Date.now(),
  13.       },
  14.       // 明确告诉 HttpClient 以 JSON 格式处理返回的响应 body
  15.       dataType: 'json',
  16.     });
  17.     ctx.body = result.data;
  18.   }
  19. }

下文还会详细讲解以 POST 实现 Form 表单提交和文件上传的功能。

PUT

PUT 与 POST 类似，它更加适合更新数据和替换数据的语义。除了 method 参数需要设置为 PUT，其他参数几乎跟 POST 一模一样。

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async put() {
  4.     const ctx = this.ctx;
  5.     const result = await ctx.curl('https://httpbin.org/put', {
  6.       // 必须指定 method
  7.       method: 'PUT',
  8.       // 通过 contentType 告诉 HttpClient 以 JSON 格式发送
  9.       contentType: 'json',
  10.       data: {
  11.         update: 'foo bar',
  12.       },
  13.       // 明确告诉 HttpClient 以 JSON 格式处理响应 body
  14.       dataType: 'json',
  15.     });
  16.     ctx.body = result.data;
  17.   }
  18. }

DELETE

删除数据会选择 DELETE 请求，它通常可以不需要加请求 body，但是 HttpClient 不会限制。

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async del() {
  4.     const ctx = this.ctx;
  5.     const result = await ctx.curl('https://httpbin.org/delete', {
  6.       // 必须指定 method
  7.       method: 'DELETE',
  8.       // 明确告诉 HttpClient 以 JSON 格式处理响应 body
  9.       dataType: 'json',
  10.     });
  11.     ctx.body = result.data;
  12.   }
  13. }

高级 HTTP 请求

在真实的应用场景下，还是会包含一些较为复杂的 HTTP 请求。

Form 表单提交

面向浏览器设计的 Form 表单（不包含文件）提交接口，通常都要求以 content-type: application/x-www-form-urlencoded的格式提交请求数据。

  1. // app/controller/npm.js
  2. class NpmController extends Controller {
  3.   async submit() {
  4.     const ctx = this.ctx;
  5.     const result = await ctx.curl('https://httpbin.org/post', {
  6.       // 必须指定 method，支持 POST，PUT 和 DELETE
  7.       method: 'POST',
  8.       // 不需要设置 contentType，HttpClient 会默认以 application/x-www-form-urlencoded 格式发送请求
  9.       data: {
  10.         now: Date.now(),
  11.         foo: 'bar',
  12.       },
  13.       // 明确告诉 HttpClient 以 JSON 格式处理响应 body
  14.       dataType: 'json',
  15.     });
  16.     ctx.body = result.data.form;
  17.     // 响应最终会是类似以下的结果：
  18.     // {
  19.     //   "foo": "bar",
  20.     //   "now": "1483864184348"
  21.     // }
  22.   }
  23. }

以 Multipart 方式上传文件

当一个 Form 表单提交包含文件的时候，请求数据格式就必须以 multipart/form-data进行提交了。

urllib 内置了 formstream 模块来帮助我们生成可以被消费的 form 对象。

  1. // app/controller/http.js
  2. class HttpController extends Controller {
  3.   async upload() {
  4.     const { ctx } = this;
  6.     const result = await ctx.curl('https://httpbin.org/post', {
  7.       method: 'POST',
  8.       dataType: 'json',
  9.       data: {
  10.         foo: 'bar',
  11.       },
  13.       // 单文件上传
  14.       files: __filename,
  16.       // 多文件上传
  17.       // files: {
  18.       //   file1: __filename,
  19.       //   file2: fs.createReadStream(__filename),
  20.       //   file3: Buffer.from('mock file content'),
  21.       // },
  22.     });
  24.     ctx.body = result.data.files;
  25.     // 响应最终会是类似以下的结果：
  26.     // {
  27.     //   "file": "'use strict';\n\nconst For...."
  28.     // }
  29.   }
  30. }

以 Stream 方式上传文件

其实，在 Node.js 的世界里面，Stream 才是主流。如果服务端支持流式上传，最友好的方式还是直接发送 Stream。Stream 实际会以 Transfer-Encoding: chunked 传输编码格式发送，这个转换是 HTTP 模块自动实现的。

  1. // app/controller/npm.js
  2. const fs = require('fs');
  3. const FormStream = require('formstream');
  4. class NpmController extends Controller {
  5.   async uploadByStream() {
  6.     const ctx = this.ctx;
  7.     // 上传当前文件本身用于测试
  8.     const fileStream = fs.createReadStream(__filename);
  9.     // httpbin.org 不支持 stream 模式，使用本地 stream 接口代替
  10.     const url = `${ctx.protocol}://${ctx.host}/stream`;
  11.     const result = await ctx.curl(url, {
  12.       // 必须指定 method，支持 POST，PUT
  13.       method: 'POST',
  14.       // 以 stream 模式提交
  15.       stream: fileStream,
  16.     });
  17.     ctx.status = result.status;
  18.     ctx.set(result.headers);
  19.     ctx.body = result.data;
  20.     // 响应最终会是类似以下的结果：
  21.     // {"streamSize":574}
  22.   }
  23. }

options 参数详解

由于 HTTP 请求的复杂性，导致 httpclient.request(url, options) 的 options 参数会非常多。接下来将会以参数说明和代码配合一起讲解每个可选参数的实际用途。

HttpClient 默认全局配置

  1. // config/config.default.js
  2. exports.httpclient = {
  3.   // 是否开启本地 DNS 缓存，默认关闭，开启后有两个特性
  4.   // 1. 所有的 DNS 查询都会默认优先使用缓存的，即使 DNS 查询错误也不影响应用
  5.   // 2. 对同一个域名，在 dnsCacheLookupInterval 的间隔内（默认 10s）只会查询一次
  6.   enableDNSCache: false,
  7.   // 对同一个域名进行 DNS 查询的最小间隔时间
  8.   dnsCacheLookupInterval: 10000,
  9.   // DNS 同时缓存的最大域名数量，默认 1000
  10.   dnsCacheMaxLength: 1000,
  12.   request: {
  13.     // 默认 request 超时时间
  14.     timeout: 3000,
  15.   },
  17.   httpAgent: {
  18.     // 默认开启 http KeepAlive 功能
  19.     keepAlive: true,
  20.     // 空闲的 KeepAlive socket 最长可以存活 4 秒
  21.     freeSocketTimeout: 4000,
  22.     // 当 socket 超过 30 秒都没有任何活动，就会被当作超时处理掉
  23.     timeout: 30000,
  24.     // 允许创建的最大 socket 数
  25.     maxSockets: Number.MAX_SAFE_INTEGER,
  26.     // 最大空闲 socket 数
  27.     maxFreeSockets: 256,
  28.   },
  30.   httpsAgent: {
  31.     // 默认开启 https KeepAlive 功能
  32.     keepAlive: true,
  33.     // 空闲的 KeepAlive socket 最长可以存活 4 秒
  34.     freeSocketTimeout: 4000,
  35.     // 当 socket 超过 30 秒都没有任何活动，就会被当作超时处理掉
  36.     timeout: 30000,
  37.     // 允许创建的最大 socket 数
  38.     maxSockets: Number.MAX_SAFE_INTEGER,
  39.     // 最大空闲 socket 数
  40.     maxFreeSockets: 256,
  41.   },
  42. };

应用可以通过 config/config.default.js 覆盖此配置。

data: Object

需要发送的请求数据，根据 method 自动选择正确的数据处理方式。

  • GET，HEAD：通过 querystring.stringify(data) 处理后拼接到 url 的 query 参数上。
  • POST，PUT 和 DELETE 等：需要根据 contentType 做进一步判断处理。
    • contentType = json：通过 JSON.stringify(data) 处理，并设置为 body 发送。
    • 其他：通过 querystring.stringify(data) 处理，并设置为 body 发送。
  1. // GET + data
  2. ctx.curl(url, {
  3.   data: { foo: 'bar' },
  4. });
  6. // POST + data
  7. ctx.curl(url, {
  8.   method: 'POST',
  9.   data: { foo: 'bar' },
  10. });
  12. // POST + JSON + data
  13. ctx.curl(url, {
  14.   method: 'POST',
  15.   contentType: 'json',
  16.   data: { foo: 'bar' },
  17. });

dataAsQueryString: Boolean

如果设置了 dataAsQueryString=true，那么即使在 POST 情况下，也会强制将 options.data 以 querystring.stringify 处理之后拼接到 url 的 query 参数上。

可以很好地解决以 stream 发送数据，且额外的请求参数以 url query 形式传递的应用场景：

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   dataAsQueryString: true,
  4.   data: {
  5.     // 一般来说都是 access token 之类的权限验证参数
  6.     accessToken: 'some access token value',
  7.   },
  8.   stream: myFileStream,
  9. });

content: String|Buffer

发送请求正文，如果设置了此参数，那么会直接忽略 data 参数。

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   // 直接发送原始 xml 数据，不需要 HttpClient 做特殊处理
  4.   content: '<xml><hello>world</hello></xml>',
  5.   headers: {
  6.     'content-type': 'text/html',
  7.   },
  8. });

files: Mixed

文件上传，支持格式： String | ReadStream | Buffer | Array | Object。

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   files: '/path/to/read',
  4.   data: {
  5.     foo: 'other fields',
  6.   },
  7. });

多文件上传：

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   files: {
  4.     file1: '/path/to/read',
  5.     file2: fs.createReadStream(__filename),
  6.     file3: Buffer.from('mock file content'),
  7.   },
  8.   data: {
  9.     foo: 'other fields',
  10.   },
  11. });

stream: ReadStream

设置发送请求正文的可读数据流，默认是 null。一旦设置了此参数，HttpClient 将会忽略 data 和 content。

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   stream: fs.createReadStream('/path/to/read'),
  4. });

writeStream: WriteStream

设置接受响应数据的可写数据流，默认是 null。一旦设置此参数，那么返回值 result.data 将会被设置为 null，因为数据已经全部写入到 writeStream 中了。

  1. ctx.curl(url, {
  2.   writeStream: fs.createWriteStream('/path/to/store'),
  3. });

consumeWriteStream: Boolean

是否等待 writeStream 完全写完才算响应全部接收完毕，默认是 true。此参数不建议修改默认值，除非我们明确知道它的副作用是可接受的，否则很可能会导致 writeStream 数据不完整。

method: String

设置请求方法，默认是 GET。支持 GET、POST、PUT、DELETE、PATCH 等所有 HTTP 方法。

contentType: String

设置请求数据格式，默认是 undefined，HttpClient 会自动根据 data 和 content 参数自动设置。data 是 object 的时候默认设置的是 form。支持 json 格式。

如需要以 JSON 格式发送 data：

  1. ctx.curl(url, {
  2.   method: 'POST',
  3.   data: {
  4.     foo: 'bar',
  5.     now: Date.now(),
  6.   },
  7.   contentType: 'json',
  8. });

dataType: String

设置响应数据格式，默认不对响应数据做任何处理，直接返回原始的 buffer 格式数据。支持 text 和 json 两种格式。

注意：设置成 json 时，如果响应数据解析失败会抛 JSONResponseFormatError 异常。

  1. const jsonResult = await ctx.curl(url, {
  2.   dataType: 'json',
  3. });
  4. console.log(jsonResult.data);
  6. const htmlResult = await ctx.curl(url, {
  7.   dataType: 'text',
  8. });
  9. console.log(htmlResult.data);

fixJSONCtlChars: Boolean

是否自动过滤响应数据中的特殊控制字符 (U+0000 ~ U+001F)，默认是 false。通常一些 CGI 系统返回的 JSON 数据会包含这些特殊控制字符，通过此参数可以自动过滤掉它们。

  1. ctx.curl(url, {
  2.   fixJSONCtlChars: true,
  3.   dataType: 'json',
  4. });

headers: Object

自定义请求头。

  1. ctx.curl(url, {
  2.   headers: {
  3.     'x-foo': 'bar',
  4.   },
  5. });

timeout: Number|Array

请求超时时间，默认是 [ 5000, 5000 ]，即创建连接超时是 5 秒，接收响应超时是 5 秒。

  1. ctx.curl(url, {
  2.   // 创建连接超时 3 秒，接收响应超时 3 秒
  3.   timeout: 3000,
  4. });
  6. ctx.curl(url, {
  7.   // 创建连接超时 1 秒，接收响应超时 30 秒，用于响应比较大的场景
  8.   timeout: [ 1000, 30000 ],
  9. });

agent: HttpAgent

允许通过此参数覆盖默认的 HttpAgent，如果你不想开启 KeepAlive，可以设置此参数为 false。

  1. ctx.curl(url, {
  2.   agent: false,
  3. });

httpsAgent: HttpsAgent

允许通过此参数覆盖默认的 HttpsAgent，如果你不想开启 KeepAlive，可以设置此参数为 false。

  1. ctx.curl(url, {
  2.   httpsAgent: false,
  3. });

auth: String

简单登录授权（Basic Authentication）参数，将以明文方式将登录信息以 Authorization 请求头发送出去。

  1. ctx.curl(url, {
  2.   // 参数必须按照 `user:password` 格式设置
  3.   auth: 'foo:bar',
  4. });

digestAuth: String

摘要登录授权（Digest Authentication）参数，设置此参数会自动对 401 响应尝试生成 Authorization 请求头，尝试以授权方式请求一次。

  1. ctx.curl(url, {
  2.   // 参数必须按照 `user:password` 格式设置
  3.   digestAuth: 'foo:bar',
  4. });

followRedirect: Boolean

是否自动跟进 3xx 的跳转响应，默认是 false。

  1. ctx.curl(url, {
  2.   followRedirect: true,
  3. });

maxRedirects: Number

设置最大自动跳转次数，避免循环跳转无法终止，默认是 10 次。此参数不宜设置过大，它只在 followRedirect=true 情况下才会生效。

  1. ctx.curl(url, {
  2.   followRedirect: true,
  3.   // 最大只允许自动跳转 5 次。
  4.   maxRedirects: 5,
  5. });

formatRedirectUrl: Function(from, to)

允许我们通过 formatRedirectUrl 自定义实现 302、301 等跳转 url 拼接， 默认是 url.resolve(from, to)。

  1. ctx.curl(url, {
  2.   formatRedirectUrl: (from, to) => {
  3.     // 例如可在这里修正跳转不正确的 url
  4.     if (to === '//foo/') {
  5.       to = '/foo';
  6.     }
  7.     return url.resolve(from, to);
  8.   },
  9. });

beforeRequest: Function(options)

HttpClient 在请求正式发送之前，会尝试调用 beforeRequest 钩子，允许我们在这里对请求参数做最后一次修改。

  1. ctx.curl(url, {
  2.   beforeRequest: options => {
  3.     // 例如我们可以设置全局请求 id，方便日志跟踪
  4.     options.headers['x-request-id'] = uuid.v1();
  5.   },
  6. });

streaming: Boolean

是否直接返回响应流，默认为 false。开启 streaming 之后，HttpClient 会在拿到响应对象 res 之后马上返回，此时 result.headers 和 result.status 已经可以读取到，只是没有读取 data 数据而已。

  1. const result = await ctx.curl(url, {
  2.   streaming: true,
  3. });
  5. console.log(result.status, result.data);
  6. // result.res 是一个 ReadStream 对象
  7. ctx.body = result.res;

注意：如果 res 不是直接传递给 body，那么我们必须消费这个 stream，并且要做好 error 事件处理。

gzip: Boolean

是否支持 gzip 响应格式，默认为 false。开启 gzip 之后，HttpClient 将自动设置 Accept-Encoding: gzip 请求头，并且会自动解压带 Content-Encoding: gzip 响应头的数据。

  1. ctx.curl(url, {
  2.   gzip: true,
  3. });

timing: Boolean

是否开启请求各阶段的时间测量，默认为 false。开启 timing 之后，可以通过 result.res.timing 拿到这次 HTTP 请求各阶段的时间测量值（单位是毫秒），通过这些测量值，我们可以非常方便地定位到这次请求最慢的环境发生在那个阶段，效果如同 Chrome network timing 的作用。

timing 各阶段测量值解析：

  • queuing：分配 socket 耗时
  • dnslookup：DNS 查询耗时
  • connected：socket 三次握手连接成功耗时
  • requestSent：请求数据完整发送完毕耗时
  • waiting：收到第一个字节的响应数据耗时
  • contentDownload：全部响应数据接收完毕耗时
  1. const result = await ctx.curl(url, {
  2.   timing: true,
  3. });
  4. console.log(result.res.timing);
  5. // {
  6. //   "queuing":29,
  7. //   "dnslookup":37,
  8. //   "connected":370,
  9. //   "requestSent":1001,
  10. //   "waiting":1833,
  11. //   "contentDownload":3416
  12. // }

ca，rejectUnauthorized，pfx，key，cert，passphrase，ciphers，secureProtocol

这几个都是透传给 HTTPS 模块的参数，具体请查看 https.request(options, callback)。

调试辅助

如果你需要对 HttpClient 的请求进行抓包调试，可以添加以下配置到 config.local.js：

  1. // config.local.js
  2. module.exports = () => {
  3.   const config = {};
  5.   // add http_proxy to httpclient
  6.   if (process.env.http_proxy) {
  7.     config.httpclient = {
  8.       request: {
  9.         enableProxy: true,
  10.         rejectUnauthorized: false,
  11.         proxy: process.env.http_proxy,
  12.       },
  13.     };
  14.   }
  16.   return config;
  17. }

然后启动你的抓包工具，如 charles 或 fiddler。

最后通过以下指令启动应用：

  1. $ http_proxy=http://127.0.0.1:8888 npm run dev

然后就可以正常操作了，所有经过 HttpClient 的请求，都可以你的抓包工具中查看到。

常见错误

创建连接超时

  • 异常名称：ConnectionTimeoutError
  • 出现场景：通常是 DNS 查询比较慢，或者客户端与服务端之间的网络速度比较慢导致的。
  • 排查建议：请适当增大 timeout 参数。

服务响应超时

  • 异常名称：ResponseTimeoutError
  • 出现场景：通常是客户端与服务端之间网络速度比较慢，并且响应数据比较大的情况下会发生。
  • 排查建议：请适当增大 timeout 参数。

服务主动断开连接

  • 异常名称：ResponseError, code: ECONNRESET
  • 出现场景：通常是服务端主动断开 socket 连接，导致 HTTP 请求链路异常。
  • 排查建议：请检查当时服务端是否发生网络异常。

服务不可达

  • 异常名称：RequestError, code: ECONNREFUSED, status: -1
  • 出现场景：通常是因为请求的 url 所属 IP 或者端口无法连接成功。
  • 排查建议：请确保 IP 或者端口设置正确。

域名不存在

  • 异常名称：RequestError, code: ENOTFOUND, status: -1
  • 出现场景：通常是因为请求的 url 所在的域名无法通过 DNS 解析成功。
  • 排查建议：请确保域名存在，也需要排查一下 DNS 服务是否配置正确。

JSON 响应数据格式错误

  • 异常名称：JSONResponseFormatError
  • 出现场景：设置了 dataType=json 并且响应数据不符合 JSON 格式，就会抛出此异常。
  • 排查建议：确保服务端无论在什么情况下都要正确返回 JSON 格式的数据。

全局 request 和 response 事件

在企业应用场景，常常会有统一 tracer 日志的需求。为了方便在 app 层面统一监听 HttpClient 的请求和响应，我们约定了全局 request 和 response 来暴露这两个事件。

  1.     init options
  2.         |
  3.         V
  4.     emit `request` event
  5.         |
  6.         V
  7.     send request and receive response
  8.         |
  9.         V
  10.     emit `response` event
  11.         |
  12.         V
  13.        end

request 事件：发生在网络操作发生之前

请求发送之前，会触发一个 request 事件，允许对请求做拦截。

  1. app.httpclient.on('request', req => {
  2.   req.url //请求 url
  3.   req.ctx //是发起这次请求的当前上下文
  5.   // 可以在这里设置一些 trace headers，方便全链路跟踪
  6. });

response 事件：发生在网络操作结束之后

请求结束之后会触发一个 response 事件，这样外部就可以订阅这个事件打印日志。

  1. app.httpclient.on('response', result => {
  2.   result.res.status
  3.   result.ctx //是发起这次请求的当前上下文
  4.   result.req //对应的 req 对象，即 request 事件里面那个 req
  5. });

示例代码

完整示例代码可以在 eggjs/examples/httpclient 找到。