zoukankan      html  css  js  c++  java
  • 封装axios

    直接上代码

      1 const request = {
      2   post0 (url, params) {
      3     return FEBS_REQUEST.post(url, params, {
      4       headers: {
      5         'Content-Type': 'application/json;charset=UTF-8'
      6       }
      7     })
      8   },
      9   post (url, params) {
     10     return FEBS_REQUEST.post(url, params, {
     11       transformRequest: [(params) => {
     12         let result = ''
     13         Object.keys(params).forEach((key) => {
     14           if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
     15             result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
     16           }
     17         })
     18         console.log(result, 'postResult1111111')
     19         return result
     20       }],
     21       headers: {
     22         'Content-Type': 'application/x-www-form-urlencoded'
     23       }
     24     })
     25   },
     26   put (url, params) {
     27     return FEBS_REQUEST.put(url, params, {
     28       transformRequest: [(params) => {
     29         let result = ''
     30         Object.keys(params).forEach((key) => {
     31           if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
     32             result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
     33           }
     34         })
     35         return result
     36       }],
     37       headers: {
     38         'Content-Type': 'application/x-www-form-urlencoded'
     39       }
     40     })
     41   },
     42   put0 (url, params) {
     43     return FEBS_REQUEST.put(url, params, {
     44       headers: {
     45         'Content-Type': 'application/x-www-form-urlencoded'
     46       }
     47     })
     48   },
     49   get (url, params) {
     50     let _params
     51     if (Object.is(params, undefined)) {
     52       _params = ''
     53     } else {
     54       _params = '?'
     55       for (let key in params) {
     56         if (params.hasOwnProperty(key) && params[key] !== null) {
     57           _params += `${key}=${params[key]}&`
     58         }
     59       }
     60     }
     61     return FEBS_REQUEST.get(`${url}${_params}`)
     62   },
     63   delete (url, params) {
     64     let _params
     65     if (Object.is(params, undefined)) {
     66       _params = ''
     67     } else {
     68       _params = '?'
     69       for (let key in params) {
     70         if (params.hasOwnProperty(key) && params[key] !== null) {
     71           _params += `${key}=${params[key]}&`
     72         }
     73       }
     74     }
     75     return FEBS_REQUEST.delete(`${url}${_params}`)
     76   },
     77   export (url, params = {}) {
     78     message.loading('导出数据中')
     79     return FEBS_REQUEST.post(url, params, {
     80       transformRequest: [(params) => {
     81         let result = ''
     82         Object.keys(params).forEach((key) => {
     83           if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
     84             result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
     85           }
     86         })
     87         return result
     88       }],
     89       responseType: 'blob'
     90     }).then((r) => {
     91       const content = r.data
     92       const blob = new Blob([content])
     93       const fileName = `${new Date().getTime()}_导出结果.xlsx`
     94       if ('download' in document.createElement('a')) {
     95         const elink = document.createElement('a')
     96         elink.download = fileName
     97         elink.style.display = 'none'
     98         elink.href = URL.createObjectURL(blob)
     99         document.body.appendChild(elink)
    100         elink.click()
    101         URL.revokeObjectURL(elink.href)
    102         document.body.removeChild(elink)
    103       } else {
    104         navigator.msSaveBlob(blob, fileName)
    105       }
    106     }).catch((r) => {
    107       console.error(r)
    108       message.error('导出失败')
    109     })
    110   },
    111   download (url, params, filename) {
    112     message.loading('文件传输中')
    113     return FEBS_REQUEST.post(url, params, {
    114       transformRequest: [(params) => {
    115         let result = ''
    116         Object.keys(params).forEach((key) => {
    117           if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
    118             result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
    119           }
    120         })
    121         return result
    122       }],
    123       responseType: 'blob'
    124     }).then((r) => {
    125       const content = r.data
    126       const blob = new Blob([content])
    127       if ('download' in document.createElement('a')) {
    128         const elink = document.createElement('a')
    129         elink.download = filename
    130         elink.style.display = 'none'
    131         elink.href = URL.createObjectURL(blob)
    132         document.body.appendChild(elink)
    133         elink.click()
    134         URL.revokeObjectURL(elink.href)
    135         document.body.removeChild(elink)
    136       } else {
    137         navigator.msSaveBlob(blob, filename)
    138       }
    139     }).catch((r) => {
    140       console.error(r)
    141       message.error('下载失败')
    142     })
    143   },
    144   upload (url, params) {
    145     return FEBS_REQUEST.post(url, params, {
    146       headers: {
    147         'Content-Type': 'multipart/form-data'
    148       }
    149     })
    150   }
    151 }
    152 
    153 export default request

    然后在main.js中把方法挂到VUE原型链上

    import request from 'utils/request'
    
    Vue.prototype.$post = request.post
    Vue.prototype.$get = request.get
    Vue.prototype.$put = request.put
    Vue.prototype.$delete = request.delete
    Vue.prototype.$export = request.export
    Vue.prototype.$download = request.download
    Vue.prototype.$upload = request.upload
  • 相关阅读:
    [转帖]SQL中partition关键字的使用
    利用分布类防止EF更新模型丢失验证信息
    列表样式切换
    HTML5页面增强元素
    CSS3 简易照片墙
    HTML5表单增强
    HTML5 元素拖放
    【CTF】WDCTF-2017 3-1 writeup
    【CTF】WDCTF-finals-2017 3-11 writeup
    【CTF】CTFHub 技能树 文件头检查 writeup
  • 原文地址:https://www.cnblogs.com/yangshuzhong/p/11412142.html
Copyright © 2011-2022 走看看