Axios をカプセル化する Vue は何に役立ちますか?

Vue で Axios をカプセル化すると、コードの品質が向上し、使用がより便利になります。 axios の API は非常に使いやすく、開発者はプロジェクト内で簡単に直接利用することができますが、プロジェクトの規模が大きくなると、HTTP リクエストを開始するたびにタイムアウトの設定やリクエストヘッダの設定、エラー処理など。この種の作業の重複は時間を無駄にするだけでなく、コードが冗長になり保守が困難になります。コードの品質を向上させるには、使用する前にプロジェクト内で axios を 2 回カプセル化する必要があります。これにより、より便利になります。使用します。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

axios とは

axios は、HTTP リクエストを実行する XMLHttpRequest サービスに基づく軽量 HTTP クライアントです。豊富な構成、Promise のサポート、ブラウザ側と Node.js 側のサポート。 Vue2.0 以降、Youda は vue-resource の公式推奨を中止し、代わりに axios を推奨すると発表しました。現在、axios はほとんどの Vue 開発者にとって最初の選択肢となっています

##なぜカプセル化するのか

API axios は非常に使いやすく、プロジェクトで直接簡単に使用できます。 しかし、プロジェクトの規模が大きくなると、HTTPリクエストを開始するたびに、タイムアウトの設定やリクエストヘッダの設定、リクエストアドレスに応じたリクエストアドレスの決定などの作業が必要になります。プロジェクト環境、エラー処理など。再度記述する必要があります。

この種の繰り返し作業は時間を無駄にするだけでなく、コードが冗長になり、保守が困難になります。コードの品質を向上させるには、プロジェクト内で axios を 2 回カプセル化し、

例:

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

を使用する必要があります。各ページが同様のリクエストを送信する場合は、1 つを記述する必要があります。ヒープの設定とエラー処理が面倒すぎる

現時点では、使いやすくするために axios を再カプセル化する必要があります

カプセル化の方法

カプセル化中に、バックエンド、リクエスト ヘッダー、ステータス コード、リクエスト タイムアウトといくつかの取り決めをネゴシエートする必要があります...インターフェイス リクエストを設定しますプレフィックス: 開発に応じて、テスト環境と運用環境では、プレフィックスを区別する必要があります。

リクエスト ヘッダー: 特定のサービスを実装するには、リクエストを行う前にいくつかのパラメータを渡す必要があります (例: メンバーシップ サービス)

ステータス コード: インターフェイスから返されるさまざまなステータスに応じて、さまざまなサービスが実行されます。これはバックエンドと合意する必要があります。

リクエスト メソッド: get、post などのメソッドに従って再カプセル化します。

リクエスト インターセプター: リクエスト ヘッダーの設定に基づいて、どのリクエストにアクセスできるかを決定します。

レスポンス インターセプター: このブロックは、によって返されたステータス コードに基づいて、さまざまなサービスの実行を決定します。バックエンド`

インターフェイス リクエスト プレフィックスを設定します

ノード環境変数を使用して、開発環境、テスト環境、運用環境を区別する判断を行います

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

Forローカル デバッグ 場合によっては、クロスドメインを実現するために、vue.config.js ファイルで devServer を構成してプロキシ転送を実装する必要もあります。

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

リクエスト ヘッダーとタイムアウト期間を設定します

ほとんどの場合、以下のリクエスト ヘッダーは固定されています。いくつかの特別なリクエスト ヘッダーが必要になる場合のみです。ここでは、ユニバーサル リクエスト ヘッダーが基本構成として使用されます。特別なリクエスト ヘッダーが必要な場合は、特別なリクエスト ヘッダーをパラメータとして渡し、基本設定を上書きします。

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

カプセル化されたリクエスト メソッド

最初にカプセル化されたメソッドを導入し、呼び出されたインターフェイスはメソッドに再カプセル化されて公開されます

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

カプセル化されたメソッドを api.js ファイルに配置します

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

ページ内で直接呼び出すことができます

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

こうすることで API を一元管理できるようになり、将来的にはメンテナンスや変更は api.js ファイル内で行うだけで済みます。

リクエストインターセプタ

リクエスト インターセプタはそれぞれに存在できます。各リクエストにトークンを追加すると、統合処理後のメンテナンスが容易になります。

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

レスポンス インターセプタ

レスポンス インターセプタは、次のことを行うことができます。ステータスコードに基づいてログインステータスや認可を判断するなどの操作

// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

概要

カプセル化はプログラミングにおいて非常に意味のある方法です。 #axios のパッケージ化に絶対的な標準はありません。パッケージ化がプロジェクトのニーズを満たし、使いやすい限り、それは優れたパッケージング ソリューションです

[関連する推奨事項:

vuejs ビデオ チュートリアル

、

Web フロントエンド開発

]

以上がAxios をカプセル化する Vue は何に役立ちますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。