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

运行环境 Runtime environment

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

背景

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

正文

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

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

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

创建workers

  1. 登录 cloudflare,进入Workers

  2. 创建Worker

    Worker 开发

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

  1. worker JS脚本 浅析
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    // 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'

总结

我头上出现了很多问号,不过也在逐渐理解wokrers这件东西了,归根结底还是自己在JS上造诣不够深入。

相信前端专门搓JS的人,应该会更容易接受!