2020-03-29

Web前端：Cloudflare-Workers浅识

Workers 真的是新世界的大门，我很遗憾居然在其发布快一年以后才知道它的存在。

运行环境 Runtime environment

1 2	操作系统： Windows10 IDE: webStorm2019.3.3

背景

在搭建google drive网页挂载程序的时候，我初次尝试Cloudflare的Workers功能。
打破了我以前比较固有的开发方式，workers无疑是前后端web开发的福音。

正文

workers严格来说既不算前端，也不算后端，更像是中间人角色。

对前端开发而言，可以做到无后端托管，或者接口转发，非常方便。

对后端开发而言，workers作为中间件可以起到解析加速作用，
还能在不占用后端资源的情况，轻松的进行缓存，
作为分布式后端服务器的路由或者中间处理都可以胜任，
节约大量的后端资源，节省下来的服务器算力又可以服务更多用户。

创建workers

登录 cloudflare，进入Workers
创建Worker

Worker 开发

1.官方文档提供了很多文档可以作为参考官方模板

worker JS脚本浅析

// addEventListener中注册，然后开始你表演
async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': type,
    },
  }
  const responses = await Promise.all([fetch(url1, init), fetch(url2, init)])
  const results = await Promise.all([gatherResponse(responses[0]), gatherResponse(responses[1])])
  console.log("我是控制台打印信息！")
  return new Response(results, init)
}

/**
 * 分配给Worker的HTTP请求的事件类型（即，Object如event中传递的addEventListener('fetch', event => {…})）。
 * 如果注册了多个事件侦听器，则在不调用事件处理程序respondWith()时，运行时会将事件传递给下一个已注册的事件处理程序。
 */
addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request))
})


/**
 * gatherResponse等待并以字符串形式返回响应主体。
 * 在异步函数中使用await gatherResponse（..）获取响应主体
 * @param {Response} response
 */
async function gatherResponse(response) {
  const { headers } = response
  const contentType = headers.get('content-type')
  if (contentType.includes('application/json')) {
    return await response.json()
  } else if (contentType.includes('application/text')) {
    return await response.text()
  } else if (contentType.includes('text/html')) {
    return await response.text()
  } else {
    return await response.text()
  }
}
/**
 * 这里就放一些全局变量
 */
const someHost = 'https://workers-tooling.cf/demos'
const url1 = someHost + '/requests/json'
const url2 = someHost + '/requests/json'
const type = 'application/json;charset=UTF-8'