在应用里我们使用了 Next.js 提供的 fetch 请求需要的数据，我们可以自己基于这个 fetch，自己定制一个适合请求服务端应用接口的 HTTP 客户端。

在 app 目录的下面新建一个文件，名字是 service.ts，在这个文件里先声明一个 apiHttpClientHeaders，它的值是在使用 fetch 的时候需要设置的一些头部数据，类型是 Record。

setAuthHeader

请求一些接口的时候需要在请求里带着服务端给用户签发的令牌，我们可以先定义一个设置这个 Header 用的方法，声明一个 setAuthHeader，接收一个可选的 token? 参数，类型是 string。这个函数做的事情就是处理一下 apiHttpClientHeaders 里面的 Authorization 这个头部。

判断一下 token 参数是否有值，如果有，设置一下 apiHttpClientHeaders['Authorization']，等于一个字符模板，先是 Bearer 空格，然后再加上 token 的值。

else，如果 token 没有值可以把 apiHttpClientHeaders 里的 Authorization 这个属性删除掉。

apiHttpClient

下面再声明一个 apiHttpClient，它是一个异步函数，用 async 标记一下，函数有个 api 参数，类型是 string，这个 api 就是接口地址，再加上一个可选的 init? 参数，类型是 RequestInit，这个 init 是一个配置选项参数。

在函数里面声明一个 response，等于 await，用一下 fetch，设置一下请求地址，一个字符模板， 先是 appConfig.apiBaseUrl 的值 ，然后是斜线，再加上 api 这个参数的值。再设置一下 fetch 的第二个参数，也就是 init，一个对象，把 apiHttpClient 这个函数的 init 参数里的东西放进来。

然后再单独设置一下 headers，它是一个对象，把 apiHttpClientHeaders 里的东西放到这个对象里。再把 init?.headers 里的东西放进来。

这个 apiHttpClient 返回的东西是 response。

使用

打开 posts/service ，修改一下 getPosts，把 fetch 换成 apiHttpClient，请求的接口地址设置成 posts。注意这个接口地址不能用斜线开头，不然会报错。

下面再改造一下 getPostById，把 fetch 改成 apiHttpClient，请求的接口是 posts/${postId}。

把文件顶部导入的 appConfig 删除掉。

测试

在浏览器测试一下，打开内容列表页面，再访问一下单独的内容页面，都可以正常显示页面内容。说明我们自定义的接口 HTTP 客户端可以正常工作。