vue は axios カプセル化リクエストを統合します

Vue のコンポーネントベースの開発手法により、フロントエンド開発がより柔軟かつ効率的に行われます。このプロセスでは、バックエンドとのデータ対話が避けられません。 Axios は優れたデータ リクエスト フレームワークで、便利な API インターフェイスを提供し、使いやすく、信頼性が高く、拡張しやすいため、Vue プロジェクトに統合することにしました。この記事では、Vue コンポーネントで簡単に使用できるように、Axios を実用的なリクエスト メソッドにカプセル化する方法を紹介します。

Axios の概要

一般的に、Axios を使用してリクエストを送信する場合は、次の 3 つの手順が必要です:

1. Axios インスタンスを作成します:

// axios实例的默认配置
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

2. リクエストの送信:

instance.get('/api/getUser', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

3. リクエスト結果への応答:

instance.interceptors.response.use(res => {
  if (res.status === 200) {
    return res.data;
  } else {
    throw new Error(res.status);
  }
}, err => {
  throw new Error(err);
})

Axios の使用法は非常に優れています。シンプルで明確ですが、毎回 Vue コンポーネントで使用する場合、これらのコードを繰り返し記述する必要があり、時間がかかり、エラーが発生しやすくなります。したがって、これを一般的なリクエスト メソッドにカプセル化できます。

Axios リクエストのカプセル化

非同期プログラミング メソッドである Promise を使用して、Axios リクエストを一般的なメソッドにカプセル化し、それを統合できます。返された結果を処理します。

import axios from 'axios';

axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    if (localStorage.getItem('accessToken')) {
      config.headers.Authorization = localStorage.getItem('accessToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          // token过期，跳转到登录页
          break;
        case 404:
          // 请求资源不存在
          break;
        default:
          // 其他错误提示
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

export default function request(options) {
  return new Promise((resolve, reject) => {
    axios(options).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}

上記のコードでは、Axios インスタンスを作成してそのデフォルト構成を設定し、リクエストとレスポンスのインターセプターも追加します。カプセル化されたリクエスト メソッドでは、Promise を使用してリクエストの結果を返します。

• リクエスト インターセプターでは、リクエスト ヘッダーにトークンを追加することも、ここでリクエストをカスタマイズすることもできます。
• 応答インターセプターでは、ステータス コード エラーへのジャンプ、リソースが存在しないプロンプト、その他のエラー プロンプトなど、応答結果に対して特別な処理を実行できます。

リクエスト メソッドの使用法

Axios リクエストを一般的なメソッドにカプセル化した後、それを Vue コンポーネントで使用できます。呼び出し時には、メソッドの基本パラメータを渡すだけで済みます。 request:

import request from '@/utils/request';

export function fetchData() {
  return request({
    url: '/api/list',
    method: 'get'
  })
}

同様に、GET、POST、PUT、DELETE、PATCH などの HTTP メソッドのリクエストもサポートされており、パラメーターに別のメソッドを指定するだけです。

request({
  url: '/api/user',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'put',
  params: {
    id: 123
  },
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'delete',
  params: {
    id: 123
  }
});

結論

この記事では、Vue プロジェクトでの Axios の統合とカプセル化を通じて、Axios リクエスト メソッドをカプセル化する方法について詳しく説明します。このカプセル化手法により、コードの繰り返し記述量が大幅に削減され、開発効率が向上するほか、リクエスト結果の統一処理も容易になります。使用中に、さまざまなニーズを満たすために、必要に応じてその構成とインターセプターを調整および拡張できます。

以上がvue は axios カプセル化リクエストを統合しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。