// 使用时候的优化

|

// 定义 所有请求都要通过这个函数来进行处理...
export const getContents = async (data) => {
  try {
    let res = await axios.request({
      url: `${apiPrefix}/getContents`,
      data,
      method: 'post',
    })
    console.log('await res=', res)
  } catch (err) {
    console.warn('await rej=', err)
  }
}
// 1.1.0版
// 定义 所有请求都要通过这个函数来进行处理...
export const requestApi = async ({ url, data, method }) => {
  console.log(url, data, method)
  try {
    let res = await axios.request({
      url,
      data,
      method,
    })
    console.log('res', res)
    if (res.status === 200) {
      console.log('this', this)
      // 直接返回了res.data
      return res.data;
    } else {
      // 错误信息就不用返回给前台处理了.
      console.warn('err', res)
      console.log('this',this);// 无 this
      // 通过调用某处方法 将全局modal对话框显示...
      // 对于其他错误码的提示...
    }
  } catch (err) {
    // 这里处理 请求响应的错误 通常来自于服务端
    console.warn('await rej=', err)
  }
}
// 定义接口
export const getContents = (data) => {
  return requestApi({
    url: `${apiPrefix}/getContents`,
    data,
    method: 'post',
  })
}

|

// 导入函数 res即 status为200时的结果
let res = getContents(params)
console.log('请求成功',res);
res.then(res => {
  console.log('then成功',res);
})

// 在axios封装处 处理方案.

|

import axios from 'axios'
import store from '@/store'
import qs from 'qs'

// 错误收集... todo 未来是否有 错误监控？
const addErrorLog = errorInfo => {
  const { statusText, status, request: { responseURL } } = errorInfo
  let info = {
    type: 'ajax',
    code: status,
    mes: statusText,
    url: responseURL
  }
  // if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}

class HttpRequest {
  constructor (baseUrl = '') {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        // 'Content-Type': 'application/x-www-form-urlencoded'
      },

    }
    return config
  }
  destroy (url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors (instance, url) {


    // 请求拦截
    instance.interceptors.request.use(config => {
          // config配置
        return config
    }, error => {
          return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
          if (response.data.status === 200) {   //服务端定义的响应status码为0时请求成功
              return Promise.resolve(response.data) //使用Promise.resolve 正常响应
        } else if (response.data.status === 404) { //服务端定义的响应status码为404时为未登录
              store.dispatch('setUserInfo', {})
            // 对于相应失败的情况下  这里我们考虑 写一个message/modal组件 可以使用函数式调用 以便 用来弹出错误信息....不然的话每个请求里都是需要这么定义 比较麻烦
              Message({
                message: '未登录'
              })
              // router.push('/login')
              return Promise.reject(response.data)    //使用Promise.reject 抛出错误和异常
        } else {
             return Promise.reject(response.data)
        }
    }, error => {
      if (error && error.response) {
          let res = {}
          res.code = error.response.status
          res.msg = throwErr(error.response.status, error.response) //throwErr 捕捉服务端的http状态码 定义在utils工具类的方法
        addErrorLog(error.response) // 错误收集
          return Promise.reject(res)
      }
        return Promise.reject(error)
    })
  }
  request (options) {
    const instance = axios.create();
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    if (options.method === 'post' && options.data !== undefined) {
      options.data = qs.stringify(options.data);
    }
    return instance(options)
  }
}
export default HttpRequest

|

//axios捕错
export const throwErr = (code, response) => {
  let message = '请求错误'
  switch (code) {
    case 400:
      message = '请求错误'
      break
    case 401:
      message = '未授权，请登录'
      break
    case 403:
      message = '拒绝访问'
      break
    case 404:
      message = `请求地址出错: ${response.config.url}`
      break
    case 408:
      message = '请求超时'
      break
    case 500:
      message = '服务器内部错误'
      break
    case 501:
      message = '服务未实现'
      break
    case 502:
      message = '网关错误'
      break
    case 503:
      message = '服务不可用'
      break
    case 504:
      message = '网关超时'
      break
    case 505:
      message = 'HTTP版本不受支持'
      break
    default:
  }
  return message