vue项目封装axios,使用promise二次封装,POST和PUT请求时使用qs库的qs.stringify转换data数据
首先安装axios 和 qs
npm install axios --save
npm install qs --save
/*
ajax请求函数模块
返回值: promise对象(异步返回的数据是: response.data)
*/
import router from '../router/router'
import axios from 'axios'
import qs from 'qs'
export default function ajax (url, data={
}, type='GET') {
type=type.toLocaleUpperCase()//转换成大写,兼容小写
return new Promise(function (resolve, reject) {
let promise
let token=localStorage.getItem('token')
type=type.toUpperCase()
let headersObj={
GET:'application/json',
DELETE:'application/json',
PUT:'application/x-www-form-urlencoded',
POST:'application/x-www-form-urlencoded',
FILE:'application/multipart-formdata'
}
let params={
}
let headers={
'Content-Type': headersObj[type],
token
}
if ((type === 'GET') || (type==='DELETE')) {
//get和delete请求时将数据放入params中,delete以什么方式发送取决于和后端的约定
params=data
} else if((type === 'POST') || (type==='PUT')){
data=qs.stringify(data)
}else if(type === 'FILE'){
//FILE为前端自定义类型,主要是因为普通的POST请求需要用qs库,而文件上传则不需要,所以单独做判断,最终给后端发送的时候还是POST
type='POST'
}else {
console.error('请求方式错误,仅支持以下请求方式:GET,POST,DELETE,PUT,FILE')
return
}
promise = axios({
url,
data,
params,
method:type,
baseURL:'https://exzample.com',//
headers,
withCredentials:true
})
promise.then(function (response) {
let {
ret,msg}=response.data
//这里和后端约定返回-2为未登录,直接跳转到登录页面
if(ret===-2){
alert(msg)
router.replace('/login')
return
}
resolve(response.data)//直接返回data
}).catch(function (error) {
reject(error)
})
})
}