Open PaulChess opened 2 years ago
vite 代理 proxy 解决跨域问题:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
proxy:{
// 添加代理
'/api': 'http://127.0.0.1:9527'
}
}
})
请求:
axios({
url: '/api/test'
})
axios 的二次封装:
// src/api/index.js
import axios from 'axios'
axios.interceptors.request.use(function(config) {
// 这里可以往 headers 添加 token
console.log('请求拦截', config)
return config
}, function(error) {
return Promise.reject(error)
})
axios.interceptors.response.use(function(config) {
// 这里可以对各种响应状态进行处理
console.log('响应拦截', config)
return config
}, function(error) {
return Promise.reject(error)
})
export default axios
思路: 根据请求的 url、data、method 为请求生成唯一的 key,在请求拦截器中判断此次请求是否还在进行中,如果在进行中则调用 axios 的 cancelToken
方法取消请求,如果不在进行中则将此次请求加入队列;最后在响应拦截器中根据将此次请求的 key 移除掉。
// src/util/index.js
import md5 from 'md5'
// 计算当前请求的 key 值
export const getRequestKey = (config) => {
if (!config) {
return md5(+new Date())
}
const data = typeof config.data === 'string'
? config.data
: JSON.stringify(config.data)
return md5(`${config.url}&${config.method}&${data}`)
}
export const pending = {}
export const checkPending = (key) => !!pending[key]
export const removePending = (key) => delete pending[key]
// src/api/index.js
const CancelToken = axios.CancelToken
axios.interceptors.request.use(function(config) {
const key = getRequestKey(config)
if (checkPending(key)) {
const source = CancelToken.source()
config.cancelToken = source.token
source.cancel('重复请求')
} else {
pending[key] = true
}
return config
}, function(error) {
return Promise.reject(error)
})
axios.interceptors.response.use(function(response) {
const key = getRequestKey(response.config)
removePending(key)
return config
}, function(error) {
return Promise.reject(error)
})
关于axios请求的扩展知识点:
下面的 comments 记录一些知识点,梳理出大纲以后将知识点做一个整合。