nuxt3中如何進(jìn)行網(wǎng)絡(luò)api接口請求
nuxt3項(xiàng)目中需要調(diào)用springboot提供的服務(wù)接口。雖然nuxt3本身就支持提供接口服務(wù)痕檬，
但畢竟這個(gè)框架主要擅長的是ssr。一些復(fù)雜的業(yè)務(wù)后臺邏輯還是用成熟的springboot去做會好些尚镰。
nuxt3中使用網(wǎng)絡(luò)請求的方法變成了內(nèi)置的api鼻种。在之前版本nuxtjs中都是使用第三方式插件庫(axios)。新版本里官網(wǎng)明確指出更推薦使用內(nèi)置的方法來進(jìn)行網(wǎng)絡(luò)接口的請求澜薄。
先看下框架內(nèi)置的網(wǎng)絡(luò)請求的方式
.useFetch
<!-- 示例: -->
<script setup>
const { data: count } = await useFetch('/api/count')
</script>
<template>
Page visits: {{ count }}
</template>
官網(wǎng)說這個(gè)接口是對 useAsyncData與$fetch的一層封閉为肮。
這樣似乎調(diào)用機(jī)制和useAsynData是一致的，但其實(shí)筆者用的時(shí)候發(fā)現(xiàn)還是有點(diǎn)區(qū)別的
useAsyncData 在server端會執(zhí)行肤京，但在client端會wait颊艳，并且上面代碼中的data數(shù)據(jù)和server端請求的一致。 直到下一次跳轉(zhuǎn)到此頁面中才會執(zhí)行。
而useFetch 在client端不會wait,而是直接返回一個(gè)空數(shù)據(jù)即 代碼中的data為空
這就導(dǎo)致頁面首次要展示的內(nèi)容在server和client端不一致棋枕，就會產(chǎn)生Hydration Mismatch 的錯誤白修。等hydration(客戶端激活)完后，才
返回請求的數(shù)據(jù)重斑。也不知道是nuxt3的bug兵睛，還是本身就是這樣的機(jī)制。
方法參數(shù)和返回的數(shù)據(jù)具體介紹可以去官網(wǎng)查看
.$fetch
這個(gè)方法就是一個(gè)純粹的網(wǎng)絡(luò)接口請求的方式窥浪。也是官網(wǎng)推薦的代替使用axios的方法祖很。
<!-- 示例 -->
<script>
export default defineNuxtComponent({
fetchKey: 'hello',
async asyncData () {
return {
hello: await $fetch('/api/hello')
}
}
})
</script>
開發(fā)環(huán)境配置網(wǎng)絡(luò)代理
官網(wǎng)文檔里雖然沒有明確說明接口訪問代理如何配置。但提供了配置nitro的入口寒矿。
由于nuxt3內(nèi)置使用的是nitro服務(wù)器突琳，所以配置代理的話需要查看nitro的官網(wǎng)文檔
假如你的springboot服務(wù)器地址是 http://127.0.0.1:9090/ 則可以在nuxt.config.ts中添加如何配置即可。
nitro: {
devProxy: {
"/api": {
target: 'http://127.0.0.1:9090/',
prependPath: true,
changeOrigin: true,
}
}
}
這樣在本地開發(fā)調(diào)試的時(shí)候符相，就可以在瀏覽器上成功訪問springboot的接口拆融。
但奇怪的時(shí)，server 端的接口請求沒有走這個(gè)代理啊终。所以不得不使用原始的接口地址镜豹。
考慮到代碼復(fù)用，所以就寫了工具方法
// utils.js
export default {
getBaseUrl() {
if (process.server) {
return "http://127.0.0.1:9090/"
} else {
return "/api/"
}
}
}
使用的示例:
<script setup>
const { data: count } = await $fetch('/api/count', {
baseURL: myutils.getBaseUrl()
})
</script>
這樣在server和client都可以調(diào)用同一個(gè)接口了蓝牲。
生產(chǎn)環(huán)境部署時(shí)的nginx配置趟脂。
在部署的時(shí)候，在服務(wù)器內(nèi)網(wǎng)啟動nuxt3服務(wù)和springboot服務(wù)后例衍，
然后用nginx配置從外網(wǎng)訪問昔期。
配置如下:
server {
listen 80;
if ($host != 'xxxx') {
return 403;
}
ssl_prefer_server_ciphers on;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location /api {
proxy_pass http://localhost:9090/;
}
location / {
proxy_pass http://localhost:3000/;
}
error_page 404 /404.html;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
這樣就可以在外網(wǎng)正常訪問了。
版權(quán)聲明：本文為凸然網(wǎng)站的原創(chuàng)文章佛玄，遵循CC 4.0 BY-SA版權(quán)協(xié)議硼一，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：nuxt3中如何進(jìn)行網(wǎng)絡(luò)api接口請求
