Vue.js でアプリケーションを開発する場合、データ リクエストのインターセプトとエラー処理は不可欠な部分です。リクエストをインターセプトすることで、リクエストを送信する前に変更でき、エラー処理により、サーバーからのエラー応答を効率的に処理できます。この記事では、アプリケーションの安定性とユーザー エクスペリエンスを確保するために、Vue.js でデータ リクエストのインターセプトとエラー処理を実行する方法を紹介します。
1. Axios のインストールと設定
データリクエストのインターセプトとエラー処理を実行する前に、まず Axios が Vue.js プロジェクトにインストールされ、設定されていることを確認してください。Axios は、HTTP リクエストを送受信するための一般的な HTTP クライアントです。Axios は、npm または Yarn を使用してインストールできます。
npm install axios
# 或者
yarn add axios
次に、Axios を Vue.js アプリケーションに構成する必要があります。通常、main.jsこれをファイル内で実行します。
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
2. リクエストの傍受
リクエストのインターセプトを使用すると、リクエストがサーバーに送信される前に、認証トークンなどの情報を変更または追加できます。Axios を使用してinterceptorsリクエストのインターセプトを実装できます。以下に例を示します。
// main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在请求发送前可以做一些操作，例如添加身份验证令牌
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${
token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
上記のコードでは、リクエスト インターセプターを通じて認証トークンがローカル ストレージに存在するかどうかを確認し、リクエスト ヘッダーに追加します。
3. エラー処理
エラー処理は、アプリケーションがサーバーと通信するときに優れたユーザー エクスペリエンスを実現するための重要な部分です。Axios を使用するinterceptorsと、エラー応答をグローバルにキャプチャし、適切なアクションを実行できます。以下に例を示します。
// main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在请求发送前可以做一些操作，例如添加身份验证令牌
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${
token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做一些处理
return response
},
error => {
// 全局错误处理
if (error.response) {
// 获取HTTP状态码
const status = error.response.status
if (status === 401) {
// 处理未授权的请求，例如重定向到登录页
router.push('/login')
} else if (status === 404) {
// 处理资源不存在的情况
router.push('/404')
} else {
// 其他错误处理逻辑
// ...
}
} else {
// 处理网络错误
// ...
}
return Promise.reject(error)
}
)
上記のコードでは、エラー応答を処理するために応答インターセプターを使用しています。サーバーが 401 Unauthorized エラーを返した場合、ユーザーをログイン ページにリダイレクトできます。他の HTTP ステータス コードについては、必要に応じて適切に処理できます。
4. コンポーネントでの Axios の使用
Axios のリクエスト インターセプトとエラー処理を設定したので、Axios を使用して Vue.js コンポーネントで HTTP リクエストを送信することが簡単にできます。簡単な例を次に示します。
<template>
<div>
<button @click="fetchData">获取数据</button>
<div v-if="data">{
{ data }}</div>
<div v-if="error">{
{ error }}</div>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
error: null
}
},
methods: {
fetchData() {
this.$http.get('/api/data')
.then(response => {
this.data = response.data
})
.catch(error => {
this.error = error.message
})
}
}
}
</script>
上記の例では、コンポーネントで を使用してthis.$httpGET リクエストを送信し、成功と失敗のケースを処理しました。
5. まとめ
Vue.js でのデータ リクエストのインターセプトとエラー処理は、アプリケーションの安定性とユーザー エクスペリエンスを確保するための重要な手順です。Axios のインターセプターを使用すると、リクエストを簡単に変更し、エラー応答を処理できます。Vue.js アプリケーションの優れたパフォーマンスと信頼性を確保するには、特定のニーズに応じてインターセプターとエラー処理ロジックをカスタマイズしてください。