axios adapter and typing for
@ace-fetch/core
yarn add @ace-fetch/axios
或者
npm i -S @ace-fetch/axios
1、
apply
系列方法使用axios interceptors
处理,如果有自定义interceptors
不能改变返回类型,处理方法对AxiosResponse
、AxiosError
结构存在依赖。
问题:CanceledError 错误少了 config 参数,无法确认用户传入的处理条件。
import axios from 'axios'
import { applyLoading, applyRetry, applyCatchError } from '@ace-fetch/axios'
const axiosInstance = axios.create({})
// loading
applyLoading(axiosInstance,{
delay: 260, // 延迟显示,如果接口在设置时间内返回则不调用handler方法
handler: ()=>{ // 显示loading的处理方法
// 显示 loading
return ()=>{
// 隐藏 loading
}
}
})
axiosInstance.request({
loading: true // 是否显示loading, 或自定义设置当前loading handler方法
})
// retry
applyRetry(axiosInstance, {
maxCount: 3, // 重试次数
delay: true, // 重试延迟
validateError: (err)=> true // 触发retry的条件
})
axiosInstance.request({
retry: true // 是否使用 retry, 或自定义设置重写 registRetry 参数
})
// catchError
applyCatchError(axiosInstance,{
// 当接口通过body返回异常消息,可通过此方法判断
serializerData(data){
if(data.success){
return data.data
}else{
return Promise.reject(new Error(data.message))
}
},
handler: (err)=> new Promise(()=>{}) // 全局catch error 方法,默认会阻止往后执行
})
axiosInstance.request({
catchError: true // 是否启用catch error
})
1、
regist
系列方法使用 Promise chaining 处理, 先注册先执行;如果中途chaining 被阻止,后续方法将不会执行。
2、通过use
方法注册的插件应用到所有通过defineRegistApi
定义的方法上。
3、通过defineRegistApi
的plugins
注册的插件只应用在当前定义的方法上。
4、通过defineRegistApi
的plugins
注册的插件比通过use
方法注册的插件先执行。
注:catchError 与其它方法同时使用时建议把catchError放在最后注册,catchError handler 如果阻止Promise执行会使后面方法不生效。
问题:catchError 在 fetch.use 和 defineRegistApi.plugins同时使用时,本地plugins中hanlder阻止Promise继续执行会导致use插件中的代码无法正常执行。
import { createApp } from 'vue';
import axios from 'axios';
import { createFetch, defineRegistApi } from '@ace-fetch/core';
import { createCatchErrorPlugin, createLoadingPlugin, createRetryPlugin } from '@ace-fetch/axios';
const axiosInstance = axios.create({});
const fetch = createFetch(axiosInstance);
fetch.use(
createCatchErrorPlugin({
// 当接口通过body返回异常消息,可通过此方法判断
// 注意:如果有全局自定义 interceptors,在 request 中不能改变返回的类型,data 参数为 AxiosResponse data 参数
serializerData(data){
if(data.success){
return data.data
}else{
return Promise.reject(new Error(data.message))
}
},
handler: (error)=>{
// 处理异常
// 阻止接口继续执行
return new Promise((resolve)=>{})
}
})
)
fetch.use(
createLoadingPlugin({
delay: 260, // 延迟显示,如果接口在设置时间内返回则不调用handler方法
handler: () => {
// 显示loading的处理方法
// 显示 loading
return () => {
// 隐藏 loading
};
},
})
)
fetch.use(
createRetryPlugin({
maxCount: 3, // 重试次数
delay: true, // 重试延迟
validateError: (err)=> true // 触发retry的条件
})
)
// 定义 registApi
const useUserApi = defineRegistApi('user', {
apis: {
getUser: 'get /user',
},
plugins:[
createCatchErrorPlugin({
...
}),
createLoadingPlugin({
...
}),
createRetryPlugin({
...
})
]
});
const useApi = useUserApi();
// 使用registApi
useApi.getUser({
// loading 生效
loading: true,
});
// fetch.client 指向是 axiosInstance
fetch.client.get('/user', {
// loading 不生效
loading: true,
});
// 在Vue中使用请查看"@ace-fetch/vue"文档
const app = createApp({});
app.use(fetch);
app.mount('#app');