vue封装axios

'use strict'

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
//内外网打包
var x
if (!window.location.origin) {
  x = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '')
} else {
  x = window.location.origin
}
Vue.prototype.baseURL = x
const request = axios.create({
  baseURL: x + '加入代理路径', // 请求地址 url = base url + request url
  timeout: 50000 // 请求超时时间
})
request.defaults.withCredentials = true
request.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

request.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return Promise.resolve(error.response)
  }
)

function checkStatus(response) {
  // loading
  // 如果http状态码正常,则直接返回数据
  if (response && (response.status === 200 || response.status === 304)) {
    return response.data
    // 如果不需要除了data之外的数据,可以直接 return response.data
  } else {
    const err = {
      message: '',
      status: (response && response.status) || ''
    }
    switch (err.status) {
      case 400:
        err.message = '请求参数错误'
        break

      case 401:
        err.message = '未授权,请登录'
        break

      case 403:
        err.message = '拒绝访问,请登录'
        break

      case 404:
        err.message = `请求地址出错:`
        break

      case 408:
        err.message = '请求超时'
        break

      case 500:
        err.message = '服务器内部错误'
        break

      case 501:
        err.message = '服务未实现'
        break

      case 502:
        err.message = '网关错误'
        break

      case 503:
        err.message = '服务不可用'
        break

      case 504:
        err.message = '网关超时'
        break

      case 505:
        err.message = 'HTTP版本不受支持'
        break
      default:
        err.message = '网络错误'
        break
    }
    // 异常状态下,把错误信息返回去
    err.message = `${(response && response.config.url) || '' + err.message}`
    return err
  }
}

function checkCode(res) {
  return res
}
export default {
  post(url, data, type, timeout = 50000) {
    let ContentType = 'application/x-www-form-urlencoded;charset=UTF-8'
    let postData = ''
    if (type === 'JSON') {
      ContentType = 'application/json'
      postData = data

    } else {
      postData = qs.stringify(data)
    }
    return request({
      method: 'post',
      url,
      data: postData,
      timeout: timeout,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': ContentType,
        appScope: 6,
      }
    })
      .then(response => {
        return checkStatus(response)
      })
      .then(res => {
        return checkCode(res)
      })
  },
  put(url, data, type, timeout = 50000) {
    let ContentType = 'application/x-www-form-urlencoded;charset=UTF-8'
    let postData = ''
    if (type === 'JSON') {
      ContentType = 'application/json'
      postData = data

    } else {
      postData = qs.stringify(data)
    }
    return request({
      method: 'put',
      url,
      data: postData,
      timeout: timeout,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': ContentType,
        appScope: 6,
      }
    })
      .then(response => {
        return checkStatus(response)
      })
      .then(res => {
        return checkCode(res)
      })
  },
  get(url, params, time) {
    return request({
      method: 'get',
      url,
      params, // get 请求时带的参数
      timeout: Number(time) ? time : '50000',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(response => {
        return checkStatus(response)
      })
      .then(res => {
        return checkCode(res)
      })
  },
  upload(url, data) {
    return request({
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      method: 'post',
      url: url,
      data: data,
      timeout: 50000
    })
  }
}

 

posted @ 2022-04-26 16:10  cuteyuchen  阅读(356)  评论(0编辑  收藏  举报