1、快速开始
如果我们想把请求HOOK住,我们需要一个特定的TRIGGER;此处我们的TRIGGER是addEventListener(),也就是我们所有功能的入口,我们一般都按照如下方式HOOK住请求。
addEventListener('fetch', event => {
return event.respondWith(handleRequest(event))
})
然后,我们就可以在handleRequest方法中,实现我们想要的逻辑。其中我们一般需要拿到请求的内容request,request包含在event内,可以按照如下方式获取;request对象中,包含了url、headers、method等属性,比如我们想获取url,则可以按照如下方式获取;例如,我们想根据不同url返回不同的内容,则可以针对url进行判断并返回不同内容。
async function handleRequest(event) {
const { request } = event
const { url } = request
if (url.endsWith('/router1')) {
return rawJsonResponse({result: 'a'})
}
if (url.endsWith('/router2')) {
return rawJsonResponse({result: 'b'})
}
}
最后,我们需要构造一个response返回给浏览器;为了返回能够被浏览器正确显示,我们需要指定content-type,可以按照如下方式指定headers中的content-type;通过new一个Response对象,我们可以生成一个返回,并把headers信息添加进去,就可以生成一个返回。
async function rawJsonResponse(json) {
const init = {
headers: {
'content-type': 'application/json;charset=UTF-8',
},
}
return new Response(JSON.stringify(json), init)
}
至此,我们完成了一个获取请求-根据请求执行不同逻辑-生成返回并返回的流程,完整代码如下。
async function rawJsonResponse(json) {
const init = {
headers: {
'content-type': 'application/json;charset=UTF-8',
},
}
return new Response(JSON.stringify(json), init)
}
async function rawJsonResponse(json) {
const init = {
headers: {
'content-type': 'application/json;charset=UTF-8',
},
}
return new Response(JSON.stringify(json), init)
}
async function handleRequest(event) {
const { request } = event
const { url } = request
if (url.endsWith('/router1')) {
return rawJsonResponse({ result: 'a' })
}
if (url.endsWith('/router2')) {
return rawJsonResponse({ result: 'b' })
}
}
addEventListener('fetch', event => {
return event.respondWith(handleRequest(event))
})
2、函数接口
addEventListener(type, event => {…}))
参数说明
type: type固定为’fetch’。 event: event包含三个方法,respondWith()、passThroughOnException()、waitUntil()。 respondWith()方法为请求提供自定义的返回。 passThroughOnException()方法会在代码出现异常时直接从源站获取内容,以避免代码异常影响正常访问。 waitUntil()方法可以延长时间的生命周期,当代码逻辑里存在响应时间较长的其他服务调用时,可以使用该方法。
new Request(input [, init])
参数说明
input: 可传URL或Request对象。当你想修改URL时,需在此参数位置传入URL。但你想修改其他属性时,此参数位置传入已存在的Request对象以继承属性。
init (可选): 修改Request属性时,可传入需要修改的参数。可选参数如下: method: 请求方法,如GET、POST。 headers: 请求头。 body: 请求数据。当请求方法为GET或HEAD时,Request不包含body。 redirect: 重定向方式,可选follow, error, or manual。默认为manual。
new Response(body, init)
参数说明
body (可选): Response的body,可以是以下格式中的一种: BufferSource FormData ReadableStream URLSearchParams USVString init (可选): 可以自定义Response的属性。 status: 状态码,比如:200。 statusText: 状态,比如:OK。 headers: Response的headers。
更多内容可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Request/Request
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/Response