ホームページ > 記事 > ウェブフロントエンド > Axios のカプセル化と Vue の一般的なメソッドの概要
Axios のカプセル化と Vue での一般的なメソッドの紹介
Axios は Promise をベースにした HTTP ライブラリであり、可読性、使いやすさ、拡張性が優れていることが利点です。人気のあるフロントエンド フレームワークとして、Vue は Axios の完全なサポートも提供します。この記事では、Vue で Axios をカプセル化する方法と、Axios でよく使用されるメソッドをいくつか紹介します。
1. Axios のカプセル化
開発プロセス中、多くの場合、固定ヘッダーの追加、エラー戻りの統一処理など、Axios のカスタマイズされたカプセル化を実行する必要があります。これにより、コードがクリーンになり、保守が容易になります。以下では、Axios をカプセル化する方法について説明します。
(1) リクエスト構成のカプセル化
まずはリクエスト構成を一元管理するための config.js ファイルを定義します。
import axios from 'axios' // 创建一个axios的实例 const Axios = axios.create({ baseURL: '', timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 添加请求拦截 Axios.interceptors.request.use( config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } ) // 添加响应拦截器 Axios.interceptors.response.use( response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) } ) export default Axios
このファイルでは、Axios インスタンスを定義し、リクエスト インターセプトとレスポンス インターセプターを追加します。このように、リクエストを送信するときは、まずリクエスト インターセプターによって処理され、応答するときも、最初にレスポンス インターセプターによって処理されます。
(2) カプセル化リクエストメソッド
Axios インスタンスは config.js ファイルに定義されており、必要に応じてさまざまなリクエストメソッドを作成できます。たとえば、ここで get メソッドを定義する必要があります。
import Axios from './config' export function get(url, params = {}) { return new Promise((resolve, reject) => { Axios.get(url, { params: params }) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }) }
ここでの get メソッドは Axios インスタンスの get メソッドを使用し、リクエスト時に URL と params を渡すことで GET リクエストを送信できます。リクエストが成功した場合は、Promise を使用して返されたデータを解決し、リクエストが失敗した場合はエラーを拒否します。
同様に、必要に応じてさまざまなタイプのリクエスト メソッドをカプセル化できます。
2. Axios のよく使われるメソッドの紹介
Axios のカプセル化が完了したら、以下に Axios のよく使われるメソッドをいくつか紹介します。
(1) GET request
get(url[, config])
url: リクエストされた URL には相対パスまたは絶対パスを使用できます。
config: パラメータ、ヘッダーなどを含む、要求された構成。
import Axios from './config' Axios.get('/user?id=1') .then(response => {}) .catch(error => {})
(2) POST リクエスト
post(url[, data[, config]])
url: リクエストされた URL は相対パスまたは絶対パスを使用できます。 。
data: 要求されたデータ。
config: ヘッダーなどを含む、要求された構成。
import Axios from './config' Axios.post('/user', { id: 1, name: 'user' }) .then(response => {}) .catch(error => {})
(3) PUT リクエスト
put(url[, data[, config]])
url: リクエストされた URL は相対パスまたは絶対パスを使用できます。 。
data: 要求されたデータ。
config: ヘッダーなどを含む、要求された構成。
import Axios from './config' Axios.put('/user', { id: 1, name: 'user' }) .then(response => {}) .catch(error => {})
(4) DELETE リクエスト
delete(url[, config])
url: リクエストされた URL には相対パスまたは絶対パスを使用できます。
config: ヘッダーなどを含む、要求された構成。
import Axios from './config' Axios.delete('/user?id=1') .then(response => {}) .catch(error => {})
(5) リクエスト インターセプト
config.js ファイルで、リクエスト インターセプターを定義します。リクエスト インターセプターを使用して、カスタム データ処理を実行したり、リクエスト ヘッダーを追加したりできます。
Axios.interceptors.request.use( config => { // 在发送请求之前做些什么 config.headers.Authorization = 'token' return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } )
(6) レスポンス インターセプト
config.js ファイルで、レスポンス インターセプタを定義します。応答インターセプターを使用して、カスタム エラー処理、データ処理などを行うことができます。
Axios.interceptors.response.use( response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 if (error.response) { // do something } return Promise.reject(error) } )
3. 概要
この記事では、Vue で Axios をカプセル化する方法と、Axios で一般的に使用されるメソッドをいくつか紹介します。 Axios の利点は使いやすさとスケーラビリティにあり、開発中に HTTP リクエストを迅速に送信し、応答結果を処理するのに役立ちます。 Axios を使用する場合、後のメンテナンスを容易にするために、統一されたリクエスト構成管理を実現する必要があります。同時に、さまざまな開発ニーズを満たすために、必要に応じてさまざまな種類のリクエスト メソッドをカプセル化する必要があります。
以上がAxios のカプセル化と Vue の一般的なメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。