vue封装axios网络请求

vue封装axios网络请求。

'use strict'

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'

// axios 封装
// 请求时的拦截
axios.interceptors.request.use(
  config => {
    // 发送请求之前做一些处理,loading...
    // Vue.prototype.$loading({
    //   target: '#main-view',
    //   background: 'rgba(0, 0, 0, 0.6)'
    // })
    return config
  },
  error => {
    // 当请求异常时做一些处理
    return Promise.reject(error)
  }
)

// 响应时拦截
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    // console.log('interceptors response error', error)
    // 这里我们把错误信息扶正, 后面就不需要写 catch 了
    // return Promise.resolve(error.response)
    // console.log(error, error.response)
    return Promise.reject(error)
  }
)

function errorState (error) {
  if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
    console.log('请求超时')
    Vue.prototype.$notify({
      title: '请求超时',
      type: 'error'
    })
    return
  }
  const response = error.response
  // console.log('errorState', response)
  // 如果http状态码正常，则直接返回数据
  // if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {+
  if (response && (response.status === 200 || response.status === 304)) {
    return response // 如果不需要除了data之外的数据，可以直接 return response.data
  } else if (
    response &&
    (response.status === 400 || response.status === 500) &&
    response.config.responseType !== 'blob'
  ) {
    Vue.prototype.$notify({
      // title: response.data.error,
      title: '请求失败',
      message: response.data.error,
      type: 'error'
    })
  } else if (
    response &&
    (response.status === 400 || response.status === 500) &&
    response.config.responseType === 'blob'
  ) {
    // 如若是图片接口 则需配置 customError:true 防止读取列表图片接口返回错误时 页面产生大量错误信息
    var reader = new FileReader()
    reader.onload = e => {
      // console.log(e.target.result, JSON.parse(e.target.result).error)
      Vue.prototype.$notify({
        title: '请求失败',
        message: JSON.parse(e.target.result).error,
        type: 'error'
      })
    }
    reader.readAsText(error.response.data)
  }
}

function successState (response) {
  // 统一判断后端返回的错误码
  // console.log('successState', response)
  if (response.data.error) {
    Vue.prototype.$notify({
      title: '请求失败',
      message: response.data.error,
      type: 'error'
    })
  }
}

const httpServer = (opts, params) => {
  // console.log('params', params)
  const Public = {}
  var oUrl = ''
  let qsOpts = { allowDots: true }
  if (opts.qsOption) {
    qsOpts = Object.assign({ allowDots: true }, opts.qsOption)
  }

  let data
  if (params instanceof FormData || opts.method === 'get') {
    data = params
  } else if (opts.qs === false) {
    data = params
  } else {
    // console.log('qsOpts', qsOpts)
    data = qs.stringify(Object.assign(Public, params), qsOpts)
  }
  if ((opts.url).indexOf('?') >= 0) {
    oUrl = opts.url + '&randTime=' + encodeURIComponent(Math.random())
  } else {
    oUrl = opts.url + '?randTime=' + encodeURIComponent(Math.random())
  }
  // console.log('data', data, qs.parse(data))

  const httpDefaultOpts = {
    // http默认配置
    method: opts.method,
    withCredentials: true, // 跨域获取cookie
    crossDomain: true,
    baseURL: localStorage.getItem('BASE_API') || opts.baseURL,
    url: oUrl,
    timeout: 60000,
    // params: Object.assign(Public, params),
    params: data,
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    },
    data: data,
    // data: data instanceof FormData ? data : qs.stringify(Object.assign(Public, data), qsOpts),
    // data: qs.stringify(Object.assign(Public, data)),
    headers:
      opts.method === 'get'
        ? {
          'X-Requested-With': 'XMLHttpRequest',
          Accept: 'application/json',
          'Content-Type': 'application/json; charset=UTF-8'
        }
        : {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
  }

  if (opts.method === 'get') {
    delete httpDefaultOpts.data
  } else {
    delete httpDefaultOpts.params
    delete httpDefaultOpts.paramsSerializer
  }

  if (opts.responseType) {
    httpDefaultOpts.responseType = opts.responseType
  }

  if (opts.headers) {
    httpDefaultOpts.headers['Content-Type'] = opts.headers['Content-Type']
  }

  const promise = new Promise(function (resolve, reject) {
    axios(httpDefaultOpts)
      .then(response => {
        // console.log('success')
        if (!opts.customSuccess) {
          successState(response)
        }
        resolve(response.data)
      })
      .catch(response => {
        // console.log('error')
        if (!opts.customError) {
          errorState(response)
        }
        // resolve(response.data)
        reject(response)
      })
  })

  return promise
}

export default httpServer

在其他页面需要使用时，用import引入该js文件即可。例如：

import http from './http' // 地址根据项目文件夹结构引入

/**
 * 接口名称：编辑
 * 参数1 ： add  array
 * 参数2 ： defId  integer
 * 参数3 ： delete[]  array
 * 参数4 ： maxNumber  integer
 */
export function modifyPositionDefinition (params) {
  let options = {
    url: '你的接口地址',
    method: 'PUT',
    qsOption: {
      arrayFormat: 'brackets'
    }
  }
  return http(options, params)
}