VUE使用axios请求封装工具使用

- axios 简介

• axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
  从浏览器中创建 XMLHttpRequest
  从 node.js 发出 http 请求
  支持 Promise API
  拦截请求和响应
  转换请求和响应数据
  取消请求
  自动转换JSON数据
  客户端支持防止 CSRF/XSRF

• npm安装

$ npm install axios

• axios工具JS

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

// API服务器地址
let SERVICE_URL = '//172.80.2.205:8700'
const axiosX = axios.create({
  baseURL: SERVICE_URL
})
// 拦截请求头
axiosX.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    return config
  },
  error => {
    return Promise.reject(error.response)
  }
)
axiosX.defaults.headers.post['Content-Type'] = ''
axiosX.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
const XHR = () => {
  // 用户登陆信息
  const user = {
    token: window.sessionStorage.token
  }

  const sucFun = res => {
    return res.data
  }

  const errFun = (res) => {
    let r = {
      msg: '请求失败,请稍后重试！'
    }
    return r
  }

  return { user, sucFun, errFun }
}

// POST
const axiosPost = function (url = '', data = {}) {
  let { user, sucFun, errFun } = XHR()
  let reqData = qs.stringify({ ...user, ...data })
  return axiosX.post(url, reqData).then(sucFun).catch(errFun)
}

// GET
const axiosGet = function (url = '', data = {}) {
  let { user, sucFun, errFun } = XHR()
  let params = {
    params: { ...user, ...data }
  }
  let headers = {
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }
  return axiosX.get(url, params, headers).then(sucFun).catch(errFun)
}

export default (Vue) => {
  Vue.prototype.$axios = axios
  Vue.prototype.$axiosGet = axiosGet
  Vue.prototype.$axiosPost = axiosPost
  Vue.prototype.$baseApi = SERVICE_URL
  Vue.axios = axios
  Vue.axiosPost = axiosPost
  Vue.axiosGet = axiosGet
}
export {axiosGet, axiosPost}