vue-ajax-manager

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',
    }),
  },
};

• 动态创建 APIstate和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 请求结束后，不论成功与否，该事件都会执行