Vueでaxiosリクエストインターセプトを使う方法の紹介

この記事では、Vue で axios リクエスト インターセプトを使用する方法を紹介します。必要な方は参考にしていただければ幸いです。

1. はじめに

axios の基本的な使用方法については、あまり説明しません。axios のドキュメントの説明書を参照してください。

ここで、実際のプロジェクトでの axios インターセプトの使用方法を共有しましょう。

axios の公式ドキュメントでインターセプターの欄を見たことがある人は多いでしょう。ドキュメントには説明しか書かれていないため、少し混乱している人もいるかもしれません。これがどのような状況で使用されるかはわかりません。結局のところ、多くの初心者は axios インターセプターの使用を諦めますが、インターセプターを使用すると、ページ内の不要なコードが大幅に削減されます。

2. 前の

プロジェクトで使用された UI フレームワークは iview

以下のわかりやすいヒントはすべて、this.$Message などの iview ui のメッセージ プロンプト コンポーネントを使用します。 .xxx
/api/request は単なるインターフェイスの例であり、実際の開発ではバックエンドによって提供されるインターフェイスを使用します。
code はバックグラウンド ステータス コードです。ここでは例を示しているだけです。なぜ私のリターン コードがあなたのものと異なるのかは聞かないでください。これらはすべてバックグラウンドと伝達され、合意される必要があります。
使用されるリクエスト ヘッダーは: axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; このリクエスト ヘッダーが使用される理由については、AXIOS が 2 つのリクエストを送信することに関する私の他の記事を参照してください。 qs モジュールを使用する必要があります。そうしないと、バックエンドがこのデータを認識できません。

3. リクエスト インターセプトを使用しない

リクエスト インターセプトを使用しないことも可能ですが、ログイン ページを例に挙げてみましょう。

追加要素のないシンプルなページです。|ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

Ifリクエストをインターセプトしないと、各リクエストと各ステータスを特別に処理する必要があります。各ページに数十の特別なステータス リクエストと多くのリクエストがある場合、ページは非常に長く肥大化し、保守が困難になります。

3. リクエスト インターセプトを使用する

同じリクエスト リターン コードを抽出して、リクエスト インターセプトに書き込むことができます。

インターセプトを設定した後、コンポーネント コードは大幅に簡素化できます。ログイン インターフェイスを例に挙げてみましょう。

main.js

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时，请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

この方法で、axios リクエストにインターセプトを追加します。多くのコードロジックとページ 読みやすく保守しやすいです

4. その他

これは axios インターセプトの最も基本的な使用法ですが、もちろんそれ以上のものです。ビジネスが必要とする限り、axios インターセプトは常に役に立ちます。ツールは死んでおり、人は生きています。別の小さな例を紹介します。リクエスト署名の設定など。

リクエスト署名はフロントデスクとバックデスクの間で取り決められた通信方法であり、データを暗号化することでデータの安全性をある程度確保できます

このログインページを例に考えてみましょう。

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

httpRequest データ情報をバックグラウンドに送信する前に、データに署名して暗号化します

main.js
で、送信されたデータを傍受します

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据，这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址，这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳，时间戳函数不作展示，也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址，这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password，进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

このようにして、データの暗号化と署名が完了し、バックグラウンドに送信されます。

注: これは例としてのみ示されています。署名が必要な場合、署名方法はフロント デスクとバックエンド間の通信によって決まります。

axios リクエストのインターセプトはこれよりもはるかに優れています。具体的にどのように使用するかは、実際の作業と実際のプロジェクトによって異なります。

以上がVueでaxiosリクエストインターセプトを使う方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。