Axios攔截器

import axios from 'axios'
import ConfigBase from '@/config/index'
import { Message } from 'element-ui'
import { loading } from '@/components/index.js'
import { toLogout } from './app'
import api from '@/apis'

const to = promise => {
  return promise.then(data => [data, null]).catch(err => [undefined, err])
}
/**
 * 創(chuàng)建 axios 實(shí)例
 */
const service = axios.create({
  timeout: 15000, // // 超時(shí)時(shí)間
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  }
})
service.interceptors.request.use(
  (config) => {
    const {
      method = 'POST',
      showLoading = true,
      data = {},
      isDiagnosis = false
    } = config
    // 沒(méi)有特殊配置,則自動(dòng)顯示加載中l(wèi)oading
    if (showLoading) {
      // 放個(gè)統(tǒng)一的loading
      loading(true)
    }
    config.data = method === 'post' ? data : ''
    config.params = method === 'get' ? data : ''
    // 是否診療路勁接口
    data.visitSiteId = isDiagnosis ? ConfigBase.visitSiteIdZllj : ConfigBase.visitSiteId
    if (isDiagnosis) {
      config.headers.apiToken = localStorage.getItem('apiToken')
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  (response) => {
    const { codeHandle = {}} = response.config
    const res = response.data
    loading(false)
    if (res.error) {
      return Promise.reject(res)
    }
    const code = res.code
    const isSuccess = code === 0 || code === '0' || code === '000000'

    if (isSuccess) {
      return Promise.resolve(res.data || res.result)
    } else if (codeHandle === 'skip') { // 允許所有異常code通過(guò)
      return Promise.reject(res)
    } else if (codeHandle === 'silent') { // 所有狀態(tài)碼靜默
      console.error(`[request] 已配置所有異常靜默 ${code}: ${res.message}`)
      return Promise.reject(res)
    } else if (code === '1008') {
      Message.error(res.message || res.data.message || '網(wǎng)絡(luò)超時(shí),請(qǐng)重新登錄')
      toLogout()
    } else {
      Message.error(res.message || res.data.message || '網(wǎng)絡(luò)異常')
      return Promise.reject(res)
    }
  },
  (error) => {
    loading(false)
    Message.error('網(wǎng)絡(luò)異常')
    return Promise.reject(error)
  }
)
/** aa
 * @params url(請(qǐng)求接口地址)
 * @params data(請(qǐng)求參數(shù))
 * @params ops(請(qǐng)求附加參數(shù))
 */
export const postAsync = (url, options = {}) => {
  options.method = 'POST'
  options.url = url
  return to(service(options))
}

/** aa
 * @params url(請(qǐng)求接口地址)
 * @params data(請(qǐng)求參數(shù))
 * @params ops(請(qǐng)求附加參數(shù))
 */
export const getAsync = (url, options = {}) => {
  options.method = 'GET'
  options.url = url
  return to(service(options))
}

/**
 * @params url(請(qǐng)求接口地址)
 * @params data(請(qǐng)求參數(shù))
 * @params ops(請(qǐng)求附加參數(shù))
 */
export const get = (url, options = {}) => {
  options.method = 'GET'
  options.url = url
  return service(options)
}

/**
 * @params url(請(qǐng)求接口地址)
 * @params data(請(qǐng)求參數(shù))
 * @params ops(請(qǐng)求附加參數(shù))
 */

export const post = (url, options = {}) => {
  options.method = 'POST'
  options.url = url
  return service(options)
}

export default {
  install(_Vue) {
    _Vue.prototype.$api = api
    _Vue.prototype.$postAsync = postAsync
    _Vue.prototype.$getAsync = getAsync
    _Vue.prototype.$getRawFetch = get
    _Vue.prototype.$postRawFetch = post
  }
}

dd config

import { request } from './request';
import { commonNotify } from './utils.js';
import { errorMessage } from './error';
import storage from './localStorage';

export const to = promise =>
  promise.then(data => [data, null]).catch(err => [undefined, err]);

/**
 * http請(qǐng)求 controller 會(huì)攔截api 并根據(jù)ddHost賦值實(shí)際對(duì)應(yīng)
 * @param {*} type post get
 * @param {*} url api
 * @param {*} params 數(shù)據(jù)
 * @param {*} config ddHost請(qǐng)求的其他服務(wù)代理字段 silence=skip靜默處理 loading暫時(shí)沒(méi)添加全局loading
 * @returns
 */
export async function fetch(
  type = 'post',
  url,
  params = {},
  config = { ddHost: '', silence: '', loading: false },
) {
  const { ddHost = '', silence = '', loading = false } = config;
  if (ddHost) {
    params.ddHost = ddHost;
  }
  // 獲取當(dāng)前接口權(quán)限列表
  const roleInfo = storage.get('roleInfo') || {};
  const { permission_list = [] } = roleInfo || {};

  if (
    !permission_list ||
    !Array.isArray(permission_list) ||
    !permission_list.includes(url)
  ) {
    return Promise.reject(`無(wú)當(dāng)前接口${url}權(quán)限`);
  }
  const [{ data }, err] = await to(request(type, { url, params }));
  if (err) {
    return Promise.reject(err);
  }

  const { status_code } = data || {};
  // 請(qǐng)求成功的狀態(tài)碼
  const isSuccessCode = [0, '0'].includes(status_code);
  if (isSuccessCode) {
    // 請(qǐng)求成功
    return Promise.resolve(data.data);
  } else if (!isSuccessCode && silence === 'skip') {
    // 靜默處理:特殊情況不處理的異常狀態(tài)碼
    return Promise.resolve(data);
  }

  // 錯(cuò)誤code提示,并拋異常
  commonNotify(window.vm, {
    type: 'error',
    message: errorMessage[status_code] || '接口異常',
  });
  return Promise.reject('接口異常');
}

/**
 * post請(qǐng)求,經(jīng)過(guò)to方法處理
 * @param {*} url
 * @param {*} params
 * @param {*} config
 * @returns
 */
export function fetchPost(url, params = {}, config = {}) {
  return to(fetch('post', url, params, config));
}

/**
 * get請(qǐng)求,經(jīng)過(guò)to方法處理
 * @export
 * @param {*} url
 * @param {*} [params={}]
 * @param {*} [config={}]
 * @return {*}
 */
export function fetchGet(url, params = {}, config = {}) {
  return to(fetch('get', url, params, config));
}

/**
 * post請(qǐng)求 Promise().then().catch()形式的寫(xiě)法、以及用于Promise.all()
 * @param {*} url
 * @param {*} params
 * @param {*} config
 * @returns
 */
export function rawFetchPost(url, params = {}, config = {}) {
  return fetch('post', url, params, config);
}

/**
 * get請(qǐng)求 Promise().then().catch()形式的寫(xiě)法、以及用于Promise.all()
 * @param {*} url
 * @param {*} params
 * @param {*} config
 * @returns
 */
export function rawFetch(url, params = {}, config = {}) {
  return fetch('get', url, params, config);
}

export default {
  install(_Vue) {
    _Vue.prototype.$fetchPost = fetchPost;
    _Vue.prototype.$fetchGet = fetchGet;
    _Vue.prototype.$rawFetch = rawFetch;
    _Vue.prototype.$rawFetchPost = rawFetchPost;
  },
};

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容