axiosは通常のビジネスシーンに基づく二次パッケージ(更新)


一年ぶりに更新しました.vueプロジェクトによってよく見られる業務シーンはaxiosの二次パッケージです.
機能の実現:1.ieブラウザ対応バッファ2.低減または更新要求3.インターフェースドメイン使用環境変数4.グローバルloading状態5.クローズ可能なグローバルエラーメッセージ6.グローバル改ページパラメータ7…
迎撃器
/**
 *      
 * @param  {} requestStart     
 */
service.interceptors.request.use(
  config => {
    requestStart({ config });
    return config;
  },
  error => {
    Message.error("    ");
    Promise.reject(error);
  }
);
/**
 *      
 * @param  {} requestEnd 1.    
 * @param  {} responseResolve 2.      
 */
service.interceptors.response.use(
  response => {
    const { status, data, config } = response;
    requestEnd({ config, data });
    return responseResolve({ status, data, config });
  },
  error => {
    if (axios.isCancel(error)) {
      Message.warning("     ,       !");
    } else {
      const { response } = error;
      Message.error({
        dangerouslyUseHTMLString: true,
        message: `

: ${ response.config.url }

: ${ response.config.method }

: ${response.status}

: ${ response.statusText }

` }); } store.commit("setLoading", false); store.commit("setPageTotal", 0); return Promise.reject(error); } );
開始を求める
  • 処理要求ヘッド
  • 処理要求パラメータ
  • 処理重複要求
  • /**
     *     &&loading=true
     * @param  {} requestHeaders    
     * @param  {} requestParams     
     * @param  {} removePending     
     */
    const requestStart = ({ config } = {}) => {
      requestHeaders({ config });
      requestParams({ config });
      removePending({ config });
      addPending({ config });
      store.commit("setLoading", true);
    };
    要求応答
  • グローバルエラーリマインダは、フロントエンドのカスタムリマインダが必要なシーンで
  • をオフにすることができます.
    /**
     * @param  {} {status HTTP   
     * @param  {} data    
     * @param  {} config}={} AxiosRequestConfig
     */
    const responseResolve = ({ status, data, config } = {}) => {
      const { code, text } = data;
      if (status === 200) {
        switch (code) {
          case 200:
            return Promise.resolve(data);
          case 900401:
            Message.error(text || "    ,     !");
            window.location.href = process.env.VUE_APP_AUTH_URL;
            return Promise.reject(data);
          default:
            //       
            if (!config.headers["hide-message"]) {
              Message.error(text || "    !");
            }
            return Promise.reject(data);
        }
      } else {
        Message.error(text || "    !");
        store.commit("setLoading", false);
        return Promise.reject(data);
      }
    };
    要求の終了
  • 処理重複要求
  • 処理ページ
  • 処理loading状態
  • /**
     *     &&loading=false
     * @param  {} {config}={} AxiosRequestConfig
     * @param  {} {config}={} response body
     */
    const requestEnd = ({ config, data } = {}) => {
      removePending({ config });
      store.commit("setLoading", false);
      //    
      if (config.headers.pagination) {
        const { data: content } = data;
        if (content) {
          store.commit("setPageTotal", content.total);
        }
      }
    };
    以下は具体的な機能の実現です.
    ヘッダ前処理を要求する
  • タイムスタンプ:ieカーネルブラウザキャッシュを避ける
  • token
  • /**
     *       
     * @param  {} {config} AxiosRequestConfig
     */
    const requestHeaders = ({ config }) => {
      //1.   
      const timestamp = new Date().getTime();
      config.headers.timestamp = timestamp;
      //2.token
      const token = sessionStorage.getItem("token");
      if (token) {
        config.headers.token = token;
      }
    };
    要求パラメータ前処理
  • で構成可能なグローバル改ページパラメータは、グローバル改ページコンポーネントを使用する必要があるリスト要求に提供される
  • を使用する.
    /**
     *        
     * @param  {} {config}={} AxiosRequestConfig
     */
    const requestParams = ({ config } = {}) => {
      //    
      if (config.headers.pagination) {
        const { pageNum, pageSize } = store.getters.getPagination;
        config.data = Object.assign({}, config.data, {
          pageNum,
          pageSize
        });
      }
    };
    重複要求を処理する
  • ここでは必要に応じて前回の要求をキャンセルする
  • に変更することができる.
    /**
     *       
     * @param  {} {config}={} AxiosRequestConfig
     */
    const addPending = ({ config }) => {
      const url =
        config.url + "&" + config.method + "&" + qs.stringify(config.data);
      config.cancelToken = new cancelToken(cancel => {
        if (!pending.some(item => item.url === url)) {
          pending.push({
            url,
            cancel
          });
        }
      });
    };
    const removePending = ({ config }) => {
      const url =
        config.url + "&" + config.method + "&" + qs.stringify(config.data);
      pending.forEach((item, index) => {
        if (item.url === url) {
          item.cancel("      :" + config.url);
          pending.splice(index, 1);
        }
      });
    };
    完全コード
    import { Message } from "element-ui";
    import axios from "axios";
    import store from "../store/index";
    const qs = require("qs");
    
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API,
      timeout: 100000
    });
    
    const pending = [];
    const cancelToken = axios.CancelToken;
    
    /**
     *       
     * @param  {} {config}={} AxiosRequestConfig
     */
    const addPending = ({ config }) => {
      const url =
        config.url + "&" + config.method + "&" + qs.stringify(config.data);
      config.cancelToken = new cancelToken(cancel => {
        if (!pending.some(item => item.url === url)) {
          pending.push({
            url,
            cancel
          });
        }
      });
    };
    const removePending = ({ config }) => {
      const url =
        config.url + "&" + config.method + "&" + qs.stringify(config.data);
      pending.forEach((item, index) => {
        if (item.url === url) {
          item.cancel("      :" + config.url);
          pending.splice(index, 1);
        }
      });
    };
    /**
     *       
     * @param  {} {config} AxiosRequestConfig
     */
    const requestHeaders = ({ config }) => {
      //1.   
      const timestamp = new Date().getTime();
      config.headers.timestamp = timestamp;
      //2.token
      const token = sessionStorage.getItem("token");
      if (token) {
        config.headers.token = token;
      }
    };
    /**
     *        
     * @param  {} {config}={} AxiosRequestConfig
     */
    const requestParams = ({ config } = {}) => {
      //    
      if (config.headers.pagination) {
        const { pageNum, pageSize } = store.getters.getPagination;
        config.data = Object.assign({}, config.data, {
          pageNum,
          pageSize
        });
      }
    };
    /**
     *     &&loading=true
     * @param  {} requestHeaders 1.     
     * @param  {} requestParams 2.     
     * @param  {} removePending 3.      
     */
    const requestStart = ({ config } = {}) => {
      requestHeaders({ config });
      requestParams({ config });
      removePending({ config });
      addPending({ config });
      store.commit("setLoading", true);
    };
    /**
     *     &&loading=false
     * @param  {} {config}={} AxiosRequestConfig
     * @param  {} {config}={} response body
     */
    const requestEnd = ({ config, data } = {}) => {
      removePending({ config });
      store.commit("setLoading", false);
      //    
      if (config.headers.pagination) {
        const { data: content } = data;
        if (content) {
          store.commit("setPageTotal", content.total);
        }
      }
    };
    /**
     * @param  {} {status HTTP   
     * @param  {} data    
     * @param  {} config}={} AxiosRequestConfig
     */
    const responseResolve = ({ status, data, config } = {}) => {
      const { code, text } = data;
      if (status === 200) {
        switch (code) {
          case 200:
            return Promise.resolve(data);
          case 900401:
            Message.error(text || "    ,     !");
            window.location.href = process.env.VUE_APP_AUTH_URL;
            return Promise.reject(data);
          default:
            //       
            if (!config.headers["hide-message"]) {
              Message.error(text || "    !");
            }
            return Promise.reject(data);
        }
      } else {
        Message.error(text || "    !");
        store.commit("setLoading", false);
        return Promise.reject(data);
      }
    };
    /**
     *      
     * @param  {} requestStart     
     */
    service.interceptors.request.use(
      config => {
        requestStart({ config });
        return config;
      },
      error => {
        Message.error("    ");
        Promise.reject(error);
      }
    );
    /**
     *      
     * @param  {} requestEnd 1.    
     * @param  {} responseResolve 2.      
     */
    service.interceptors.response.use(
      response => {
        const { status, data, config } = response;
        requestEnd({ config, data });
        return responseResolve({ status, data, config });
      },
      error => {
        if (axios.isCancel(error)) {
          Message.warning("     ,       !");
        } else {
          const { response } = error;
          Message.error({
            dangerouslyUseHTMLString: true,
            message: `

    : ${ response.config.url }

    : ${ response.config.method }

    : ${response.status}

    : ${ response.statusText }

    ` }); } store.commit("setLoading", false); store.commit("setPageTotal", 0); return Promise.reject(error); } ); export default service;