用户登录

现在请求后端接口的时候,在接口地址里都需要设置这个基本的地址,就是这个
https://nid-node.ninghao.co。我们可以在自定义组合里统一设置一下这个基本的地址。

打开之前创建的这个 useApiFetch,给它添加一个参数,名字叫 api,这个 api 的值就是要请求的后端接口的地址。它的值的类型可以是 string,也可以是用一个函数返回的字符串。

在这个组合里已经用了 useRuntimeConfig 得到了运行时配置里的 apiBaseUrl 这个公开的配置。

让这个组合返回执行 useFetch 这个组合得到的结果,把 api 交给它,再提供一个选项参数,里面设置一下 baseURL,把它的值设置成 apiBaseUrl。

在内容列表页面组件这里,现在我们可以用一下 useApiFetch 这个自定义的组合,提供一个函数,返回要请求的接口地址,现在就不需要再设置基本地址了,只留下这个 posts,后面加上 page 查询符。用函数返回接口的地址,当 page 的值有变化的时候可以使用新的值重新获取内容列表数据。去掉 backward 还有 forward 里面用的 refresh。

在浏览器测试一下,刷新内容列表页面,仍然会显示一组内容列表项目,点击下一页或者上一页这两个按钮,都会改变组件里的 page 的值,它有变化的时候,就会请求得到特定页码的内容列表数据。

自定义请求接口用的组合(useApiFetch)《 Nuxt.js:网络请求 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点