第五章 異步加載數(shù)據(jù) asyncData
Nuxt.js 擴展了 Vue.js,增加了一個 asyncData 的方法危纫，使得我們可以在渲染組件之前異步獲取數(shù)據(jù)。
asyncData 方法會在組件（限于頁面組件）每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。 在這個方法被調(diào)用的時候迹恐，第一個參數(shù) context 被設(shè)定為當(dāng)前頁面的上下文對象，你可以利用 asyncData 方法來獲取數(shù)據(jù)游添，Nuxt.js 會將 asyncData 返回的數(shù)據(jù)與 data 方法返回的數(shù)據(jù)一起合并后返回給當(dāng)前組件系草。
調(diào)用后臺數(shù)據(jù)接口采用 axios 異步發(fā)送請求，所以下面我們要先安裝它唆涝。
安裝 @nuxtjs/axios
參考官網(wǎng)：https://axios.nuxtjs.org/
Nuxt.js 官方提供了 @nuxtjs/axios 模塊，此模塊中還包含了 axios 唇辨、@nuxtjs/proxy 模塊廊酣。其中 @nuxtjs/proxy
是解決 Nuxt 中跨域問題，進行代理轉(zhuǎn)發(fā)請求赏枚。
所以我們只要安裝 @nuxtjs/axios 即可：
npm install @nuxtjs/axios
- 在 nuxt.config.js 引入 @nuxtjs/axios 模塊
modules: [
'@nuxtjs/axios',
],
使用 axios 返回 Promise
- 注意 ：因為 asyncData方法是在當(dāng)前組件加載之前被調(diào)用亡驰，不能在 asyncData 方法體中用 this 傳值
asyncData(context) {
context.app.myContextFunction('asyncData')
context.app.$myAllFunction('asyncData')
return context.$axios
.$get(
'https://mock.mengxuegu.com/mock/60823ab36e9d26160e7c8b14/blog-web/test'
)
.then((response) => {
console.log('response:', response)
const data = response.data
return { data }
})
},
使用 async與await
async asyncData(context) {
context.app.myContextFunction('asyncData')
context.app.$myAllFunction('asyncData')
return await context.$axios
.$get(
'https://mock.mengxuegu.com/mock/60823ab36e9d26160e7c8b14/blog-web/test'
)
.then((response) => {
console.log('response:', response)
const data = response.data
return { data }
})
},
$axios 攔截器
- 創(chuàng)建 plugins/interceptor.js 請求攔截器
export default ({ store, route, redirect, $axios }) => {
$axios.onRequest((config) => {
console.log('請求攔截器')
return config
})
$axios.onResponse((response) => {
console.log('響應(yīng)攔截器', response)
return response
})
$axios.onError((error) => {
console.log('error.response.status', error.response.status)
})
}
- 引入插件
plugins: [
'~/plugins/vue-inject.js',
'~/plugins/ctx-inject.js',
'~/plugins/all-inject.js',
'~/plugins/interceptor.js',
],
image.png
