大家好!我叫戴向天
QQ群:602504799
QQ:809002582
废话不多说,直接上代码↓↓↓
祝你前端开发愉快
import axios from 'axios' // 导入axios cmd安装 => 淘宝镜像 ? cnpm install axios -S : npm install axios -S
import { backendPath, port, openDebug, ProjectName } from './base.js'
const maxRequest = 1 // 限制当前请求的错误次数
axios.defaults.headers.common['token'] = localStorage.getItem('token')
const headersConfig = () => { // 请求头配置
return {
// 这里就是配置一些请求的参数值
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': '*'
}
}
const debugOrder = [] // 请求后台的记录
const debug = (params) => { // 请求后台的记录进行存储
if (!openDebug) return false // 是否开始了记录存储
// 如果有参数 就进行存储
if (params) {
debugOrder.push({
...params, // 请求的信息 以及回馈值
headers: { // 请求头的信息
...headersConfig()
},
time: new Date().getTime() // 请求的时间
})
}
return debugOrder // 返回所有的请求记录
}
axios.defaults.baseURL = '/' + ProjectName
axios.interceptors.response.use(function (response) {
// 在接收响应做些什么,例如跳转到登录页
if (typeof response.data === 'string') {
const res = JSON.parse(response.data.replace(/'/g, '"'))
response.data = res
}
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
/**
GET请求
*/
async function requestByGet (url, params, num = 0) {
if (!url) {
return {
code: 0,
msg: 'haven\'t request url'
}
}
let isRequestError = false // 是否请求失败
let errorMsg = '' // 请求的错误信息
let urlParams = '?'
for (let i in params) {
urlParams += `${i}=${params[i]}&`
}
urlParams = urlParams.substring(0, urlParams.length - 1)
const result = await axios.get(`${backendPath + port}/${ProjectName}${url}${urlParams}`, {}, {
headers: {
...headersConfig()
}
}).catch(error => {
/** 当请求出现错误,就会执行 */
isRequestError = !isRequestError
errorMsg = error
})
if (isRequestError) { // 判断是否出现错误的请求
// 判断错误次数是否在允许的范围内
if (num < maxRequest) {
const res = await requestByGet(url, params, num + 1)
return res
} else { // 超出了错误次数的范围内 将错误的信息进行返回出去
return {
code: 0,
msg: errorMsg
}
}
}
debug({
method: 'GET',
url: `${backendPath}/${url}`,
params,
result
})
// console.log('get', result)
return result // 返回最终的结果
}
/**
POST请求
*/
async function requestByPost (url, params, num = 0) {
if (!url) {
return {
code: 0,
msg: 'haven\'t request url'
}
}
let isRequestError = false // 是否请求失败
let errorMsg = '' // 请求的错误信息
// console.log('params', params)
const urlParams = new URLSearchParams()
for (let i in params) urlParams.append(i, params[i])
const result = await axios({
method: 'post',
url: `${backendPath + port}/${ProjectName}${url}`,
data: params
}).catch(error => {
/** 当请求出现错误,就会执行 */
isRequestError = !isRequestError
errorMsg = error
})
if (isRequestError) { // 判断是否出现错误的请求
// 判断错误次数是否在允许的范围内
if (num < maxRequest) {
const res = await requestByPost(url, params, num + 1)
return res
} else { // 超出了错误次数的范围内 将错误的信息进行返回出去
return {
code: 0,
msg: errorMsg
}
}
}
debug({
method: 'POST',
url: `${backendPath}/${url}`,
params,
result
})
return result // 返回最终的结果
}
async function requestUploadFiles (url, params, num = 0) {
if (!url) {
return {
code: 0,
msg: 'haven\'t request url'
}
}
let isRequestError = false // 是否请求失败
let errorMsg = '' // 请求的错误信息
let formData = new FormData() // 创建form对象
for (let i in params) {
if (i === 'fils') {
formData.append(i, params[i], params.file.name)
} else {
formData.append(i, params[i])
}
}
const result = await axios.post(`${backendPath + port}/${ProjectName}${url}`, formData, {
headers: {
// ...headersConfig()
}
}
).catch(error => {
/** 当请求出现错误,就会执行 */
isRequestError = !isRequestError
errorMsg = error
})
// console.log('requestUploadFiles = >result====>', result)
if (isRequestError) { // 判断是否出现错误的请求
// 判断错误次数是否在允许的范围内
if (num < maxRequest) {
const res = await requestUploadFiles(url, params, num + 1)
return res
} else { // 超出了错误次数的范围内 将错误的信息进行返回出去
return {
code: 0,
msg: errorMsg
}
}
}
debug({
method: 'POST',
url: `${backendPath}/${url}`,
params,
result
})
return result
}
/** 最重要的一步 将方法导出 */
export {
requestByGet, requestByPost, requestUploadFiles
}