umi-request
umi-request copied to clipboard
Request 搞那么麻烦干嘛?简化呢?
不是 umi4
选用默认的 axios
?我看了下代码,貌似都没使用 Promise
。作为一个从 vue
转 react
的新手来说,设置也太复杂?相对于我以前用 axios
部分代码如下:
// request.ts
const api = axios.create({
baseURL:
import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true'
? '/proxy/'
: import.meta.env.VITE_APP_API_BASEURL,
timeout: 1000 * 60,
responseType: 'json',
})
// 请求拦截器
api.interceptors.request.use((request) => {
// 全局拦截请求发送前提交的参数
const settingsStore = useSettingsStore()
const userStore = useUserStore()
// 设置请求头
if (request.headers) {
request.headers['Accept-Language'] = xxxx
if (userStore.isLogin) {
request.headers.Authorization = `Bearer xxxx`
}
}
// 是否将 POST 请求参数进行字符串化处理
if (request.method === 'post') {
// request.data = qs.stringify(request.data, {
// arrayFormat: 'brackets',
// })
}
return request
})
api.interceptors.response.use(
(response: any) => {
const status = response.data.status
const message = response.data.message
if (status === 200 || status === 201) {
if (message.includes('xxxxxxx')) {
ElMessage.error(message)
return Promise.reject(response.data)
}
} else if (status === 422) {
ElMessage.warning(message)
return Promise.reject(response.data)
} else if (status === 402 || status === 401) {
ElMessage.warning(message)
toLogin()
} else {
toLogin()
}
return Promise.resolve(response.data)
},
(error) => {
let message = error.message
if (message === 'Network Error') {
message = '后端网络故障'
} else if (message.includes('timeout')) {
message = '接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = `接口${message.substr(message.length - 3)}异常`
}
ElMessage({
message,
type: 'error',
})
return Promise.reject(error)
},
)
使用如下:
const id:string = 'uuid-xxx-yyy……'
api.get('/xxx')
api.get(`/xxx/${id}`)
api.put(`/xxx${id}`, data:any)
api.delete(`/xxx/${id}`)
相对于umi request 文档方便多了啊。