antd初学者一定要看一看!!! 那些在antd vue 使用过程中的坑

---

前言

antd vue我自己也用了有一段时间了，现在我来总结一下我遇到的坑以及解决方法，有什么不对的地方大家可以指出来，互相交流，共同进步

一、如何封装axios并使用

基本和vue 里一样，只不过这里会涉及到一些提示功能，这个时候要用到antd自带的message组件。

1.封装axios

代码如下：

import axios from 'axios'
import { router } from '@/router'
import Message from 'ant-design-vue/lib/message';
import store from '../store'
 
// 设置api访问基路径
// axios.defaults.baseURL = 'http://oa.api.ts.ys.18178.net/api/'
axios.defaults.baseURL = '基地址'
axios.defaults.headers.post['Content-Type'] = 'application/json'  // 设置数据传输方式
axios.defaults.timeout = 100000  // 设置请求超时为10秒
 
// request 拦截器
axios.interceptors.request.use(
  config => {
  //token在哪就调哪里的
    let tokenState = store.state.tokenState
    // 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画
    console.log(token)
    // console.log('准备发送请求...')
    // console.log(tokenState)
    // 2. 带上token
    if (token) {
      config.headers.token = token
      // console.log(config.headers.Authorization)
    }
    // if(tokenState) {
    //   // 重定向到登录页面
    //   console.log("999999999999999999999999")
    //   console.log(tokenState)
    //   router.push('/login')
    // }
    // 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化
    if (config.method === 'post') {
      config.data = JSON.stringify(config.data)
    }
    // console.log(config)
    return config
  },
  error => {
    // 请求错误时
    console.log('request:', error)
    // 1. 判断请求超时
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      console.log('timeout请求超时')
      //提示文本，没有一一去加，
      Message.error("网络超时，请重新操作！",3)
      // return service.request(originalRequest)//再重复请求一次
    }
    // 2. 需要重定向到错误页面
    const errorInfo = error.response
    console.log(errorInfo)
    if (errorInfo) {
      // error =errorInfo.data  //页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
      const errorStatus = errorInfo.status // 404 403 500 ...
      router.push({
        path: `/error/${errorStatus}`
      })
    }
    return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
  }
)
 
// response 拦截器
axios.interceptors.response.use(
  response => {
    // console.log(response)
    let data = null
    // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
    if (response.data === undefined) {
      data = JSON.parse(response.request.responseText)
    } else {
      data = response.data
    }
    if (data.hasOwnProperty('errcode')) {
      console.log(data.errcode)
      console.log(data.errmsg)
      // 根据返回的errcode值来做不同的处理,需要与后端约定
      switch (data.errcode) { // code为约定的错误码
        case 100000:
          break
        case 100001:
          break
        case 100002:
          break
        case 100003:
          break
        default:
      }
    }
    // // 若不是正确的返回code，且已经登录，就抛出错误
    // const err = new Error(data.desc)
    // err.data = data
    // err.response = response
    // throw err
 
    return data
  },
  err => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = '请求错误'
          break
 
        case 401:
          err.message = '未授权，请登录'
          break
 
        case 403:
          err.message = '拒绝访问'
          break
 
        case 404:
          err.message = `请求地址出错: ${err.response.config.url}`
          break
 
        case 408:
          err.message = '请求超时'
          break
 
        case 500:
          err.message = '服务器内部错误'
          break
 
        case 501:
          err.message = '服务未实现'
          break
 
        case 502:
          err.message = '网关错误'
          break
 
        case 503:
          err.message = '服务不可用'
          break
 
        case 504:
          err.message = '网关超时'
          break
 
        case 505:
          err.message = 'HTTP版本不受支持'
          break
 
        default:
      }
    }
    console.error(err)
    return Promise.reject(err) // 返回接口返回的错误信息
  }
)
 
/**
 * GET 方式请求数据
 * @param url  请求url（已经拼接好的路径）
 * @param params 请求参数
 */
export function getData(url, params) {
  if (url == null) return
  return new Promise((resolve, reject) => {
    axios.get(url, params).then(data => {
        // alert('Api--ok')
        resolve(data)
      }).catch((error) => {
        console.log(error)
        reject(error)
      })
  })
}
 
/**
 * POST 方式请求（传送到服务器的是一个json对象）
 * @param url 请求url
 * @param params  (如下的param)
 *      var param = new URLSearchParams
 *      param.append('name', 'mirzhao')
 */
export function postData(url, params) {
  if (url == null) return
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(data => {
        // alert('Api--ok')
        resolve(data)
      })
      .catch((error) => {
        console.log(error)
        reject(error)
      })
  })
}
 
/**
 * PUT 方式请求（传送到服务器的是一个json对象）
 * @param url 请求url
 * @param params  (如下的param)
 *      var param = new URLSearchParams
 *      param.append('name', 'mirzhao')
 */
export function putData(url, params) {
  if (url == null) return
  return new Promise((resolve, reject) => {
    axios.put(url, params)
      .then(data => {
        // alert('Api--ok')
        resolve(data)
      })
      .catch((error) => {
        console.log(error)
        reject(error)
      })
  })
}
 
/**
 * 上传文件——可以同时上传多个
 * @param uploadFileUrl
 * @param formData
 *      let formData = new FormData() //创建form对象
 *      formData.append('file',file1,fileName1)//通过append向form对象添加数据
 *      formData.append('file',file2,fileName2)//通过append向form对象添加数据
 *      formData.append('file',file3,fileName3)//通过append向form对象添加数据
 */
export function postFile(uploadFileUrl, formData) {
  let config = {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: 'Bearer ' + store.state.token
    }
  }
  const instance = axios.create({
    withCredentials: true
  })
 
  return new Promise((resolve, reject) => {
    instance.post(uploadFileUrl, formData, config)
      .then(function (response) {
        resolve(response.data)
      })
      .catch(function (error) {
        reject(error)
      })
  }
  )
}
 
/**
 * 加载图片
 * @param onloadFileUrl
 */
export function getPic(onloadFileUrl) {
  let config = {
    headers: {
      Authorization: 'Bearer ' + store.state.token
    },
    responseType: 'blob',
  }
  const instance = axios.create({
    withCredentials: true
  })
 
  return new Promise((resolve, reject) => {
    instance.get(onloadFileUrl, config)
      .then(function (response) {
        resolve(response.data)
      })
      .catch(function (error) {
        reject(error)
      })
  }
  )
}
 
// console.log(response.status)//服务器返回的状态
// console.log(response.statusText)
// console.log(response.headers)
// console.log(response.config)
 
export default {
  getData,
  postData,
  putData,
  postFile,
  getPic
}

使用
代码如下：

this.$http.getData('api地址',{params:{id:this.$route.query.id}}).then(result=>{
						if(result.code==0){
							
							result.data.forEach(item=>{
								
						}
					})
this.$http.postData('report/check_comment_list',{
				check_id:this.$route.query.check_id*1,
				expert_id:this.$route.query.expert_id*1
			}).then(res=>{
			
			})

2.vue antd 上传list时状态不改变

代码如下（示例）：

	upload(info) {
					let { fileList } = info
					// this.filelist = info.filelist;
					console.log(info.file.status)
					if (info.file.status === 'done') {
						this.$message.success(`${info.file.name} 上传成功`);
						// this.filelist = info.filelist;
						this.loading = false;
					}
					else if (info.file.status=='removed'){
						this.filelist=[]
					}
					//重点就是这句，需要把filelist同步。
					this.filelist= [...fileList] 
					// console.log(this.fileList)
				},

---

总结

antd vue 总体来说是一款特别好用的ui框架，不论是样式还是功能都很齐全，我在使用的过程中遇到的最多的坑还是在from表单里，但都是一些小问题，而出现这些问题的原因还是要归结到自己对这款ui不是太熟悉，经过了长时间的使用后自己也有了提高，也希望我的分享能帮到你们一点点忙。