Ajax-axios インターセプター

インターセプターの役割

主に axios のリクエストとレスポンスの間でリクエストをインターセプトするため

インターセプターには次の 2 種類があります。

1.リクエストインターセプター：

通常、トークンはリクエストに一様に追加されます

2. 対応するインターセプター:

通常はエラーメッセージが処理され、トークンは 401 の場合に処理されます (通常はログインページにジャンプして再度トークンを取得します)。

インターセプターの一般的な処理フローチャートは次のとおりです。

サンプルコードは次のとおりです。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // debugger
    if (localStorage.getItem('token')) {
        config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
    // config 请求报文 请求地址 请求方法 请求头 请求体
}, function (error) {
    // 对请求错误做些什么
    // debugger
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // debugger
    return response;
    // response响应报文 
}, function (error) {
    // 对响应错误做点什么
    // debugger
    Toast.fail(error.response.data.message)
    if (error.response.status === 401) {
        location.href = './login.html'
    }
    return Promise.reject(error);
});

1. インターセプターが要求され、正常に実行されると、

トークンの値を受け取ったら、リクエストヘッダーの Authorization にトークンを追加します。

(パラメーター Authorization は、インターフェース文書で必要なパラメーター名です)

2. 対応するインターセプターが実行に失敗した後、

1.2 common.js ファイルに付属の Toast.fail() メソッドを使用して、ポップアップボックスにエラーテキストを出力します。

デバッガーは、エラーのプロンプトテキストの格納場所を見つけることができます。

2.2 トークンが取得されていない/有効期限が切れている場合、つまり 401

デバッガーを使用して、ステータスコードがエラーに格納されている特定の場所を見つけることができます。

401の場合、ログインページにジャンプしてユーザーのトークンを再取得します

おすすめ