1.0.12 • Published 2 years ago
vue-ajax-manager v1.0.12
AJAX-MANAGER
vue-ajax-manager
使用axios
、vuex
来快速创建ajax
过程常用的状态,并自动处理。
且提供了处理接口,意在减少 ajax 相关开发工作量。
当前库依赖
axios
、vuex
基本使用方法
- 初始化
创建文件utils/axios.js
import AjaxManager from 'vue-ajax-manager';
const { API_BASE_URL, AJAX_TIMEOUT } = process.env;
const axiosConfig = {
baseURL: process.env.API_BASE_URL,
timeout: AJAX_TIMEOUT || 60000,
};
const ajaxManager = new AjaxManager(axiosConfig);
export { ajaxManager };
- 创建 API
store/api/login.js
当前文件会export
出state
、actions
、mutations
、默认值为true
的namespace
共 4 个变量以便使用
import { ajaxManager } from '@/utils/axios';
export default ajaxManager.create({
name: 'api user login',
axiosConfig: {
url: '/demo',
},
});
- 在组件中使用
在nuxt.js
中可以直接引用
import { mapActions, mapState } from 'vuex';
export default {
computed: {
...mapState({
loginStates: (state) => state.api.login,
loading: (state) => state.api.login.onFetch,
}),
},
methods: {
...mapActions({
login: 'api/login/request',
}),
},
};
- 动态创建 API
state
和action
api/user/star.js
import { ajaxManager } from '@/utils/axios';
export default ajaxManager.dynamicCreate('api.user.star', {
name: 'api user star',
axiosConfig: {
url: 'bbb',
},
});
组件中使用:
import { mapActions } from 'vuex';
export default {
async created() {
// 动态状态必须传入参数,传入参数为唯一性节点ID
const action = await this.create.bind(this.$store)(1);
// 像非动态一样使用request方法,不同在于不再需要mapActions导入了。
action('request', { a: 2 });
action('cancel', { b: 3 });
},
methods: {
...mapActions({
create: 'api/user/star/create',
}),
},
};
基础状态
return {
onFetch: false,
error: false,
message: '',
data,
headers: {},
status: null,
canceled: false,
tokenSource: null,
loaded: false,
params: {},
};
参数名称 | 类型 | 描述 |
---|---|---|
onFetch | boolean | ajax 请求状态 |
error | boolean | ajax 请求结果 |
message | any | ajax 返回的错误或成功信息 |
data | any | response 返回值 |
headers | object | ajax 返回的头部信息 |
status | int | ajax 返回的 http status code |
canceled | boolean | 是否被取消执行 |
tokenSource | object | 该值仅内部自动处理 |
loaded | boolean | ajax 请求结束且内部状态事件等处理结束后将转为true |
params | any | ajax 请求参数 |
create
参数名称 | 类型 | 描述 |
---|---|---|
createConfig | object | 状态及 AJAX 配置 |
createConfig
参数名称 | 类型 | 描述 |
---|---|---|
axiosConfig | object | axios 配置 |
name | string | 唯一标志,名称 |
defaultData | any | 存储于状态的初始 data 值,该值默认为 reponse 返回值 |
transform | object | 在请求执行前,动态修改设置了的 axiosConfig 的值 |
check | object | 检测 response 返回值,决定了该次请求 error 值 |
process | object | 在更新状态之前,修改 response 的返回值 |
resetOnRquest | boolean | 新的请求重制状态 |
events | object | 事件 |
createConfig.transform
参数名称 | 类型 | 描述 |
---|---|---|
url | function | func 会返回 3 个参数,依次为 axiosConfig.url, params, states |
params 为 action 的参数,即 ajax 的请求参数 states 为当前定义的所有状态
createConfig.check
参数名称 | 类型 | 描述 |
---|---|---|
failure | function | func 会返回 1 个参数,该值为 response |
当 failure 返回为 true 时,状态 error 会变为 true
createConfig.process
参数名称 | 类型 | 描述 |
---|---|---|
failure | function | func 会返回 2 个参数,依次为 response、 |
success | function | func 会返回 2 个参数,依次为 response |
该返回仅改变 response 的值、对于既成事实的状态值不造成影响。
createConfig.events
参数名称 | 类型 | 描述 |
---|---|---|
onFinal | function | 当 ajax 请求结束后,不论成功与否,该事件都会执行 |
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.12
2 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago
0.0.0
4 years ago