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

太过爱你忘了你带给我的痛 2022-02-26 00:46 329阅读 0赞

**- 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}