VUE中axios 封裝，帶進度條的

首先先介紹一下，關於封裝axios,主要目的是爲了不用到處去修改 和請求有關的需求。

我用的是element-ui, IP.httpsUrl 是我的 請求前綴

基本引入如下

import Axios from 'axios'
import Cookies from 'js-cookie'
import router from '@/router';
import { Message } from 'element-ui'

接着設置 超出時間 和請求攔截 響應攔截 

const http = Axios.create()
http.defaults.timeout = 6 * 60 * 1000

// 添加請求攔截
http.interceptors.request.use((config) => {
  // 請求前可以做一些事
  return config
}, function (error) {
  // 請求錯誤做的事
  return Promise.reject(error)
})

// 響應攔截
http.interceptors.response.use((res) => {
  // 可以驗證tooken
  if (res.data.code === 401) {
    Message.error(res.data.message)
    Cookies.remove('appToken') // 刪除 無效的appToken
    router.replace({ path: '/' })
  }
  return res
}, function (error) {
  // 請求錯誤做的事
  Message.error('請求出錯了，請檢查網路或聯繫管理員')
  return Promise.reject(error)
})

然後就是 基本的請求

get請求

// get請求
const getRequest = (data) => {
  let newUrl = IP.httpsUrl + data.url
  const token = Cookies.get('appToken')
  if (token) {
    return http({
      method: 'get',
      url: newUrl,
      params: data.data,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Authorization': token
      }
    })
  }
}

post 請求

// post請求
const postRequest = (data) => {
  let newUrl = IP.httpsUrl + data.url
  const token = Cookies.get('appToken')
  if (token) {
    return http({
      method: 'post',
      url: newUrl,
      data: data.data,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Authorization': token
      }
    })
  }
}

請求是post 請求格式是get的 請求

// 假post請求
const postRequestFake = (data) => {
  let newUrl = IP.httpsUrl + data.url
  const token = Cookies.get('appToken')
  if (token) {
    return http({
      method: 'post',
      url: newUrl,
      params: data.data,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Authorization': token
      }
    })
  }
}

同時含有 post 請求和 get 請求

// post與get 混合請求
const postAddGetRequest = (data) => {
  let newUrl = IP.httpsUrl + data.url
  const token = Cookies.get('appToken')
  if (token) {
    return http({
      method: 'post',
      url: newUrl,
      params: data.data.query,
      data: data.data.taskFileAddress,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Authorization': token
      }
    })
  }
}

上傳文件 並帶進度條的

const getAddFiles = (data, fn) => {
  let newUrl = IP.httpsUrl + data.url
  const token = Cookies.get('appToken');
  if (token) {
    return http({
      method: 'post',
      url: newUrl,
      data: data.data,
      onUploadProgress: fn,
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': token
      }
    })
  }
}

注意這裏的  的  onUploadProgress 接收的是一個 方法

 

上面就是 封裝的基本的請求，現在就對在這個文件的基礎上對外暴露

export default {
    getFaultList: data => getRequest({ url: '/warning/list', data }),
    addKonwledgeType: data => postRequest({ url: '/break/type/create', data }),
    deleteKonwledgeType: data => postRequestFake({ url: '/break/type/delete', data }),
    addOrAlterJson: data => postAddGetRequest({ url: '/task/createOrUpdate', data }),
    getAddFileUrl: (data, config) => getAddFiles({ url: '/resources/uploadFrees', data }, config),
}

 

接着就是在其他地方調用了，api 就是引入上面的分支的 正常的調用，都是 傳遞obj進去 ，然後上面的分支會將其交個data.就是可以在data中獲取到 傳遞的參數了。前面的get post等 都是這樣的 傳遞方法。

  let obj = {
        pageSize: 10,
        pageNum: pageNum,
        id: sessionStorage.getItem('companyId')
      }
api.getFaultList(obj).then(response => {
        let res = response.data
        if (res.code === 200) {
          this.loading = false
          this.pageTotal = res.data.total
          this.tableData = dealData(res.data.list)
          this.isHaveData = !(res.data.list.length > 0)
        }
      })

現在來看看 上傳文件 是   展示進度條

api.getAddFileUrl(formData, function (progress) {
        _this.proData = Number(Math.floor(progress.loaded / progress.total * 100).toFixed(0))
      }).then(response => {
        let res = response.data
        if (res.code === 200) {
          console.log('上傳圖片成功')
        } else {
          console.log('上傳不成功')
        }
      })

這裏的 getAddFileUrl,方法需要傳遞兩個參數 ，一個是 提交數據，一個是回調方法，在回調方法中 叫進度條複製給你需要的ui展示。

到此，封裝  到對外暴露 再到調用  就如上面所說，大家就可以用上面的方法愉快的玩耍了