Skip to content

M
mould-vuecli3
Commit 4d8c9edd authored by lipengcheng 's avatar lipengcheng
Browse files
Options

feat: 文件整理

parent c60b82cf
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 652 deletions
src/plugins/axios/axios copy.js deleted 100644 → 0
View file @ c60b82cf
import axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
// import { Message, Notification } from 'element-ui'
/**
* 默认配置
*/
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.timeout = 10000
axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
axios.defaults.headers['b-laihua-defined-key'] = 'b customized value'
/**
* 请求拦截
*/
const requestInterceptors = axios.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
return config
},
(err) => {
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
const responseInterceptors = axios.interceptors.response.use(
(response) => {
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
// 错误信息err传入isCancel方法，可以判断请求是否被取消
if (axios.isCancel(err)) {
throw new axios.Cancel('cancel request')
} else {
console.log('网络请求失败，请重试:')
}
return Promise.reject(err)
}
)
// 移除请求拦截器
function removeRequestInterceptors() {
axios.interceptors.request.eject(requestInterceptors)
}
// 移除响应拦截器
function removeResponseInterceptors() {
axios.interceptors.response.eject(responseInterceptors)
}
axios.removeRequestInterceptors = removeRequestInterceptors
axios.removeResponseInterceptors = removeResponseInterceptors
export default axios
src/plugins/axios/axios1.js deleted 100644 → 0
View file @ c60b82cf
import axios from 'axios'
// let axios = Axios.create(Object.assign(Axios.defaults, {
// baseURL: process.env.VUE_APP_BASEURL,
// timeout: 10000,
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
// 'a-laihua-defined-key': 'a customized value',
// common: {
// 'b-laihua-defined-key': 'b customized value'
// }
// }
// }))
const myHttp = {}
myHttp.install = function(Vue) {
const http = axios.create({
// 使用create创建了一个实例对象
timeout: 1000 * 600, // 请求超时时间(毫秒)
withCredentials: true, // 是否携带cookie信息
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
// baseURL: baseurl // 请求的接口地址ip + 端口号
})
Vue.prototype.$http = http // 这样配置完就可以全局调用了
}
export default myHttp
src/plugins/axios/axios2.js deleted 100644 → 0
View file @ c60b82cf
// 参考：https://juejin.im/post/6844904152833736712#heading-5
import Axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
const baseURL = '/webapi' // 后台baseUrl
const axios = Axios.create({
baseURL: baseURL,
timeout: 30000
})
const pending = [] // 声明一个数组用于存储每个ajax请求的队列
const cancelToken = Axios.CancelToken // 初始化取消请求的构造函数
/**
* @param {请求体信息} config
* @param {直接执行的cancel函数，执行即可取消请求} f
*/
const removePending = (config, f) => {
const flagUrl = config.url + '&' + config.method // 每次请求存储在请求中队列的元素关键值,例如：一个地址为books/create的post请求处理之后为："books/create&post"
// 当前请求存在队列中，取消第二次请求
if (pending.includes(flagUrl)) {
if (f) {
// f为实例化的cancelToken函数
f('取消了')
} else {
pending.splice(pending.indexOf(flagUrl), 1) // cancelToken不存在，则从队列中删除该请求
}
} else {
// 当前请求不在队列中，就加进队列
if (f) {
pending.push(flagUrl)
}
}
}
// 添加请求拦截器
axios.interceptors.request.use(
(config) => {
// 由于表单提交都使用post请求，此处只对post做处理；具体情况要结合业务需要
config.cancelToken = new cancelToken((c) => {
removePending(config, c)
})
return config
},
(error) => {
return Promise.reject(error)
}
)
axios.interceptors.response.use(
(response) => {
removePending(response.config)
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
return Promise.reject(err)
}
)
export default axios
src/plugins/axios/axios3.js deleted 100644 → 0
View file @ c60b82cf
// https://mp.weixin.qq.com/s/v7ku2KYAVW0r4Lmui4JNGA
import axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
/**
* 默认配置
*/
console.log('axios-process.env:', process.env)
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.timeout = 10000
axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
let pendingAjax = []
const fastClickMsg = '数据请求中，请稍后'
const CancelToken = axios.CancelToken
const removePendingAjax = (config, c) => {
const url = config.url
const index = pendingAjax.findIndex((i) => i === url)
if (index > -1) {
c ? c(fastClickMsg) : pendingAjax.splice(index, 1)
} else {
c && pendingAjax.push(url)
}
}
/**
* 请求拦截
*/
axios.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
config.cancelToken = new CancelToken((c) => {
removePendingAjax(config, c)
})
return config
},
(err) => {
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
axios.interceptors.response.use(
(response) => {
removePendingAjax(response.config)
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
// 请求被取消
if (axios.isCancel(err)) {
throw new axios.Cancel('cancel requesttt')
} else {
console.log('网络请求失败，请重试:')
}
return Promise.reject(err)
}
)
export default axios
src/plugins/axios/axios4.js deleted 100644 → 0
View file @ c60b82cf
import Axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
/**
* 默认配置
*/
// Object.assign(axios.defaults, {
// baseURL: process.env.VUE_APP_BASEURL,
// timeout: 10000,
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
// 'a-laihua-defined-key': 'a customized value',
// common: {
// 'b-laihua-defined-key': 'b customized value'
// }
// }
// })
let axios = Axios.create(
Object.assign(Axios.defaults, {
baseURL: process.env.VUE_APP_BASEURL,
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'a-laihua-defined-key': 'a customized value',
common: {
'b-laihua-defined-key': 'b customized value'
}
}
})
)
// 这样处理，实例axios上有CancelToken方法
// 但是没有axios.isCancel等其他方法
// 通过Axios.create()方法创建的axios实例只有指定的get/post等数据请求方法
axios.CancelToken = Axios.CancelToken
/**
* 请求拦截
*/
axios.interceptors.request.use(
(config) => {
console.log('config:', config)
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
return config
},
(err) => {
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
axios.interceptors.response.use(
(response) => {
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
// 错误信息err传入isCancel方法，可以判断请求是否被取消
if (axios.isCancel(err)) {
throw new axios.Cancel('cancel request')
} else {
console.log('网络请求失败，请重试:')
}
return Promise.reject(err)
}
)
export default axios
src/plugins/axios/axios5.js deleted 100644 → 0
View file @ c60b82cf
// https://juejin.im/post/6844903905625653262
import axios from 'axios'
// 用于存储目前状态为pending的请求标识信息
let pendingRequest = []
/**
* 请求的拦截处理d
* @param config - 请求的配置项
*/
const handleRequestIntercept = (config) => {
// 区别请求的唯一标识，这里用方法名+请求路径
// 如果一个项目里有多个不同baseURL的请求
// 可以改成`${config.method} ${config.baseURL}${config.url}`
const requestMark = `${config.method} ${config.url}`
// 找当前请求的标识是否存在pendingRequest中，即是否重复请求了
const markIndex = pendingRequest.findIndex((item) => {
return item.name === requestMark
})
// 存在，即重复了
if (markIndex > -1) {
// 取消上个重复的请求
pendingRequest[markIndex].cancel()
// 删掉在pendingRequest中的请求标识
pendingRequest.splice(markIndex, 1)
}
// （重新）新建针对这次请求的axios的cancelToken标识
const source = axios.CancelToken.source()
config.cancelToken = source.token
// 设置自定义配置requestMark项，主要用于响应拦截中
config.requestMark = requestMark
// 记录本次请求的标识
pendingRequest.push({
name: requestMark,
cancel: source.cancel,
routeChangeCancel: config.routeChangeCancel // 可能会有优先级高于默认设置的routeChangeCancel项值
})
return config
}
/**
* 响应的拦截处理
* @param config - 请求的配置项
*/
const handleResponseIntercept = (config) => {
// 根据请求拦截里设置的requestMark配置来寻找对应pendingRequest里对应的请求标识
const markIndex = pendingRequest.findIndex((item) => {
return item.name === config.requestMark
})
// 找到了就删除该标识
markIndex > -1 && pendingRequest.splice(markIndex, 1)
}
/**
* 创建axios实例
* @param {String} url - 访问后台的主url
*/
const createAxiosInstance = (baseUrl) => {
let instance = axios.create({
baseURL: '/webapi'
})
// 默认把请求视为切换路由就会把pending状态的请求取消，false为不取消
instance.defaults.routeChangeCancel = true
// 请求拦截
instance.interceptors.request.use(handleRequestIntercept, (error) => Promise.reject(error))
// 响应拦截
instance.interceptors.response.use(
(res) => {
handleResponseIntercept(res.config)
// 其实更多情况下你执行获取res.data
// 可以return res.data;
return res
},
(error) => {
let errorFormat = {}
const response = error.response
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
if (response) {
handleResponseIntercept(response.config)
// 设置返回的错误对象格式（按照自己项目实际需求）
errorFormat = {
status: response.status,
data: response.data
}
}
// 如果是主动取消了请求，做个标识
if (axios.isCancel(error)) {
errorFormat.selfCancel = true
}
// 其实还有一个情况
// 在设置引发错误的请求时，error.message才是错误信息
// 但我觉得这个一般是脚本错误，我们项目提示也不应该提示脚本错误给用户看，一般都是我们自定义一些默认错误提示，如“创建成功！”
// 所以这里不针对此情况做处理。
return Promise.reject(errorFormat)
}
)
// 还有一些其他你想要的axios实例设置
// ...
return instance
}
const http = createAxiosInstance()
// 其他配置
// ...
export { pendingRequest }
export default http
src/plugins/axios/axios6.js deleted 100644 → 0
View file @ c60b82cf
// 通过Set数据结构阻止重复请求
// https://blog.csdn.net/Vue2018/article/details/105120206/
import axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
import { Message, Notification } from 'element-ui'
console.log('Message:', Message)
console.log('Notification:', Notification)
/**
* 默认配置
*/
console.log('axios-process.env:', process.env)
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.timeout = 10000
axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
axios.defaults.headers['b-laihua-defined-key'] = 'b customized value'
let pendingList = new Set()
console.log('pendingList:', pendingList)
/**
* 请求拦截
*/
axios.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
config.cancelToken = new axios.CancelToken((c) => {
pendingList.has(config.url) ? c(`${config.url}请求重复`) : pendingList.add(config.url)
})
console.log('pendingList:', pendingList)
return config
},
(err) => {
console.log('err1:', err)
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
axios.interceptors.response.use(
(response) => {
const { config } = response
pendingList.delete(config.url)
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
// 错误信息err传入isCancel方法，可以判断请求是否被取消
if (axios.isCancel(err)) {
throw new axios.Cancel('cancel request')
} else {
console.log('网络请求失败，请重试:')
}
return Promise.reject(err)
}
)
export default axios
src/plugins/axios/axios7.js deleted 100644 → 0
View file @ c60b82cf
// 移除全局拦截器
// 如果设置了全局拦截器，想取消实例中发出的请求，必须先移除全局拦截器，实例中配置的config.cancelToken属性才会生效
import axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
// import { Message, Notification } from 'element-ui'
/**
* 默认配置
*/
console.log('axios-process.env:', process.env)
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.timeout = 10000
axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
axios.defaults.headers['b-laihua-defined-key'] = 'b customized value'
// 请求中的api列表
let pendingList = new Set()
/**
* 请求拦截
*/
const requestInterceptors = axios.interceptors.request.use(
(config) => {
console.log('config:', config)
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
config.cancelToken = new axios.CancelToken((c) => {
pendingList.has(config.url) ? c(`${config.url}请求重复`) : pendingList.add(config.url)
})
return config
},
(err) => {
console.log('err1:', err)
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
const responseInterceptors = axios.interceptors.response.use(
(response) => {
const { config } = response
pendingList.delete(config.url)
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应错误拦截err:', err)
// 错误信息err传入isCancel方法，可以判断请求是否被取消
if (axios.isCancel(err)) {
throw new axios.Cancel('cancel request')
} else {
console.log('网络请求失败，请重试:')
}
return Promise.reject(err)
}
)
// 移除全局的请求拦截器
function removeRequestInterceptors() {
axios.interceptors.request.eject(requestInterceptors)
}
// 移除全局的响应拦截器
function removeResponseInterceptors() {
axios.interceptors.response.eject(responseInterceptors)
}
axios.removeRequestInterceptors = removeRequestInterceptors
axios.removeResponseInterceptors = removeResponseInterceptors
export default axios
src/plugins/axios/axios8.js deleted 100644 → 0
View file @ c60b82cf
// 取消重复请求的基础上
// 新增移除所有pending状态请求的方法，并对外暴露，可用于路由切换时取消之前所有请求
import axios from 'axios'
import handleResponse from '@/plugins/axios.handleResponse.js'
// import store from '@/store/index'
// import router from '@/router/index.js'
// import { Message, Notification } from 'element-ui'
/**
* 默认配置
*/
console.log('axios-process.env:', process.env)
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.timeout = 10000
axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
axios.defaults.headers['b-laihua-defined-key'] = 'b customized value'
// 请求中的api
let pendingPool = new Map()
axios.config = {}
/**
* 请求拦截
*/
const requestInterceptors = axios.interceptors.request.use(
(config) => {
axios.config = Object.assign({}, config)
console.log('config:', config)
console.log('pendingPool:', pendingPool)
// 在发送请求之前做些什么
// config.headers.common['cookie-id'] = cookieId
config.cancelToken = new axios.CancelToken((cancelFn) => {
pendingPool.has(config.url) ? cancelFn(`${config.url}请求重复`) : pendingPool.set(config.url, { cancelFn, global: config.global })
console.log('pendingPool.has(config.url):', pendingPool.has(config.url))
})
return config
},
(err) => {
console.log('请求拦截err:', err)
// 对请求错误做些什么
Promise.reject(err)
}
)
/**
* 响应拦截
*/
const responseInterceptors = axios.interceptors.response.use(
(response) => {
const { config } = response
pendingPool.delete(config.url)
return Promise.resolve(handleResponse(response))
},
// 对响应错误做点什么
(err) => {
console.log('响应拦截err:', err)
console.log('pendingPool2:', pendingPool)
console.log('axios.isCancel(err):', axios.isCancel(err))
// 错误信息err传入isCancel方法，可以判断请求是否被取消
if (axios.isCancel(err)) {
throw new axios.Cancel(err.message || '请求被主动取消')
} else {
console.log('网络请求失败，请重试:')
pendingPool.delete(axios.config.url)
}
return Promise.reject(err)
}
)
// 移除全局的请求拦截器
function removeRequestInterceptors() {
axios.interceptors.request.eject(requestInterceptors)
}
// 移除全局的响应拦截器
function removeResponseInterceptors() {
axios.interceptors.response.eject(responseInterceptors)
}
// 清除所有pending状态的请求
function clearPendingPool() {
if (!pendingPool.size) return
const pendingUrlList = Array.from(pendingPool.keys())
pendingUrlList.forEach((pendingUrl) => {
console.log('pendingUrl:', pendingUrl)
// 清除掉所有非全局的pending状态下的请求
if (!pendingPool.get(pendingUrl).global) {
pendingPool.get(pendingUrl).cancelFn()
pendingPool.delete(pendingUrl)
}
})
}
axios.removeRequestInterceptors = removeRequestInterceptors
axios.removeResponseInterceptors = removeResponseInterceptors
axios.clearPendingPool = clearPendingPool
export default axios
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment