![見出し画像](https://assets.st-note.com/production/uploads/images/149037888/rectangle_large_type_2_a1402f9aeedc162107c2277ea5121571.png?width=1200)
uniappでリクエストインターセプターを実装
1.結果
リクエストが送信されるたびに、「Loading」が表示される。
![](https://assets.st-note.com/img/1722335440874-08ltlkRLTz.png)
2.ソースコード
main.jsにおいて
// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.config.globalProperties.$baseUrl = 'http://127.0.0.1:8000/'
uni.addInterceptor('request', {
invoke(args) {
uni.showLoading({title: 'Loading', mask: true})
},
fail(err) {
uni.showToast({title: 'Error', icon: 'none'})
},
complete(res) {
uni.hideLoading()
}
})
return {
app
}
}
// #endif
uni.showLoading(OBJECT)
「Loading」プロンプト ボックスが表示される。プロンプト ボックスを閉じるには、「uni.hideLoading」 を呼び出す必要がある。
OBJECT説明
![](https://assets.st-note.com/img/1722335879120-AMlE1VStAc.png?width=1200)