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展示。

到此，封装  到对外暴露 再到调用  就如上面所说，大家就可以用上面的方法愉快的玩耍了