文章目录
- 前言
- 一、如何封装axios并使用
- 1.封装axios
- 2.vue antd 上传list时状态不改变
- 总结
前言
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不是太熟悉,经过了长时间的使用后自己也有了提高,也希望我的分享能帮到你们一点点忙。