ajax封装

174 阅读1分钟

fetch 封装

import qs from 'qs'
const originFetch = fetch;
Object.defineProperty(window, "fetch", {
  get () {
    return (url, options) => {
    /* 请求拦截 */
      console.log('before', options.config)
      return originFetch(url, {
        ...options,...{
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            Accept: 'application/json',
          },
        },
      })
    }
  }});
export default function ({ params = null, url = '', type = 'get', config = {} }) {
  let options = {
    method:type.toUpperCase(),
    config: config
  };

  if ((type === 'get' || type === 'delete')) {
    if (params) {
      url += `?${qs.stringify(params)}`
    }
  } else {
     params && (options.body = JSON.stringify(params))
  }

  return new Promise((resolve, reject) => {
    fetch(url, options).then(response => {
      /* 响应拦截 */
      console.log('after', options.config)
       return response.json()})
      .then(data => resolve(data))
  })
}


axios 封装

import axios from 'axios'
import qs from 'qs'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.interceptors.request.use(function (config) {
  /* 是否有加载弹框弹框 */
  // if (config.isLoading) {
  //   store.commit('changLoadingMasker', true)
  // }

  config.data = qs.stringify(config.data)
  /* 是否需要添加鉴权token */
  if (localStorage.token) {
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.token;
  }
  /* 是否携带跨域 */
  config.withCredentials = true
  return config;
}, function (error) {
  return Promise.reject(error);
})

axios.interceptors.response.use(function (response) {
  /* 是否有loading状态 */
  if (response.config.isLoading) {
    // TODOS 进行loading弹窗状态的关闭
    // store.commit('changLoadingMasker', false)
  }

  /* 请求错误处理内容 */
  if (response.data.code !== 0) {
    let message = response.data.message
    if (response.data.status == 401) {
     /* 后端系统报错 */
    } else {
     /* 其他的未知错误 */
    }
  }
  return response.data;
}, function (error) {
  return Promise.reject(error);
})

export default function ({ params = null, url = '', type = 'get', config = {} }) {
  let arr = [];
  if ((type === 'get' || type === 'delete')) {
    if (params) {
      url += `?${qs.stringify(params)}`
    }
    arr.push(config)
  } else {
    params ? arr.push(params, config) : arr.push({}, config)
  }
  return new Promise((resolve, reject) => {
    axios[type](url, ...arr).then(resolve).catch(reject)
  })
}