nuxt-resource-module
Advanced tools
+5
-0
@@ -5,2 +5,7 @@ # Change Log | ||
| <a name="0.3.1"></a> | ||
| ## [0.3.1](https://github.com/mya-ake/nuxt-resource-module/compare/v0.3.0...v0.3.1) (2018-11-05) | ||
| <a name="0.3.0"></a> | ||
@@ -7,0 +12,0 @@ # [0.3.0](https://github.com/mya-ake/nuxt-resource-module/compare/v0.2.5...v0.3.0) (2018-11-02) |
@@ -1,2 +0,2 @@ | ||
| import { RequestMethod, ResourceConstructor, ResourceRequestMethods, ResourceDealyProperty } from '@/interfaces'; | ||
| import { RequestMethod, ResourceConstructor, ResourceRequestMethods, ResourceDelayProperty, ResourceMayBeCancelProperty } from '@/interfaces'; | ||
| export declare class Resource implements ResourceRequestMethods { | ||
@@ -6,3 +6,5 @@ private axios; | ||
| private delayRequestConfigs; | ||
| delay: ResourceDealyProperty; | ||
| private cancelSources; | ||
| delay: ResourceDelayProperty; | ||
| mayBeCancel: ResourceMayBeCancelProperty; | ||
| get?: RequestMethod; | ||
@@ -16,3 +18,2 @@ delete?: RequestMethod; | ||
| requestDelayedRequest(): Promise<any[]>; | ||
| clearDelayedRequest(): void; | ||
| private buildMethods; | ||
@@ -22,4 +23,11 @@ private createMethod; | ||
| private createDelayMethod; | ||
| private buildMayBeCancelMethods; | ||
| private createMayBeCancelMthod; | ||
| private processResponse; | ||
| private addDelayRequestConifg; | ||
| clearDelayedRequest(): void; | ||
| private createCancelToken; | ||
| private deleteCancelToken; | ||
| cancel(url: string): void; | ||
| cancelAll(): void; | ||
| } |
+84
-11
@@ -47,2 +47,8 @@ var __assign = (this && this.__assign) || function () { | ||
| }; | ||
| import axios from 'axios'; | ||
| var createDefaultResourceRequestConfig = function () { | ||
| return { | ||
| url: '', | ||
| }; | ||
| }; | ||
| var Resource = /** @class */ (function () { | ||
@@ -54,4 +60,6 @@ function Resource(_a) { | ||
| this.delayRequestConfigs = []; | ||
| this.cancelSources = new Map(); | ||
| this.buildMethods(methods); | ||
| this.delay = this.buildDelayMethods(methods); | ||
| this.mayBeCancel = this.buildMayBeCancelMethods(methods); | ||
| } | ||
@@ -82,5 +90,2 @@ Resource.prototype.requestDelayedRequest = function () { | ||
| }; | ||
| Resource.prototype.clearDelayedRequest = function () { | ||
| this.delayRequestConfigs = []; | ||
| }; | ||
| Resource.prototype.buildMethods = function (methodNames) { | ||
@@ -100,3 +105,3 @@ var _this_1 = this; | ||
| return (function (config) { | ||
| if (config === void 0) { config = {}; } | ||
| if (config === void 0) { config = createDefaultResourceRequestConfig(); } | ||
| return __awaiter(_this_1, void 0, void 0, function () { | ||
@@ -108,3 +113,8 @@ var response; | ||
| .request(__assign({}, config, { method: methodName })) | ||
| .catch(function (err) { return err.response; })]; | ||
| .then(function (response) { | ||
| return __assign({}, response, { canceled: false }); | ||
| }) | ||
| .catch(function (err) { | ||
| return __assign({}, err.response, { canceled: axios.isCancel(err) }); | ||
| })]; | ||
| case 1: | ||
@@ -132,11 +142,11 @@ response = _a.sent(); | ||
| var _this_1 = this; | ||
| var method = this[methodName]; | ||
| if (typeof method !== 'function') { | ||
| throw new Error("Undefined method: " + methodName); | ||
| } | ||
| return (function (config) { | ||
| if (config === void 0) { config = {}; } | ||
| if (config === void 0) { config = createDefaultResourceRequestConfig(); } | ||
| return __awaiter(_this_1, void 0, void 0, function () { | ||
| var method, response; | ||
| var response; | ||
| return __generator(this, function (_a) { | ||
| method = this[methodName]; | ||
| if (typeof method !== 'function') { | ||
| throw new Error("Undefined method: " + methodName); | ||
| } | ||
| if (this.isServer) { | ||
@@ -152,2 +162,40 @@ return [2 /*return*/, method(config)]; | ||
| }; | ||
| Resource.prototype.buildMayBeCancelMethods = function (methodNames) { | ||
| var mayBeCancel = {}; | ||
| var _this = this; | ||
| methodNames.forEach(function (methodName) { | ||
| Object.defineProperty(mayBeCancel, methodName, { | ||
| get: function () { | ||
| return _this.createMayBeCancelMthod(methodName); | ||
| }, | ||
| }); | ||
| }); | ||
| return mayBeCancel; | ||
| }; | ||
| Resource.prototype.createMayBeCancelMthod = function (methodName) { | ||
| var _this_1 = this; | ||
| var method = this[methodName]; | ||
| if (typeof method !== 'function') { | ||
| throw new Error("Undefined method: " + methodName); | ||
| } | ||
| return (function (config) { | ||
| if (config === void 0) { config = createDefaultResourceRequestConfig(); } | ||
| return __awaiter(_this_1, void 0, void 0, function () { | ||
| var url, token, response; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| url = config.url; | ||
| token = this.createCancelToken(url); | ||
| config.cancelToken = token; | ||
| return [4 /*yield*/, method(config)]; | ||
| case 1: | ||
| response = _a.sent(); | ||
| this.deleteCancelToken(url); | ||
| return [2 /*return*/, response]; | ||
| } | ||
| }); | ||
| }); | ||
| }).bind(this); | ||
| }; | ||
| Resource.prototype.processResponse = function (response, config) { | ||
@@ -164,4 +212,29 @@ var dataMapper = config.dataMapper, processor = config.processor; | ||
| }; | ||
| Resource.prototype.clearDelayedRequest = function () { | ||
| this.delayRequestConfigs = []; | ||
| }; | ||
| Resource.prototype.createCancelToken = function (url) { | ||
| var source = axios.CancelToken.source(); | ||
| this.cancelSources.set(url, source); | ||
| return source.token; | ||
| }; | ||
| Resource.prototype.deleteCancelToken = function (url) { | ||
| this.cancelSources.delete(url); | ||
| }; | ||
| Resource.prototype.cancel = function (url) { | ||
| var source = this.cancelSources.get(url); | ||
| if (!source) { | ||
| return; | ||
| } | ||
| source.cancel(); | ||
| this.deleteCancelToken(url); | ||
| }; | ||
| Resource.prototype.cancelAll = function () { | ||
| var _this_1 = this; | ||
| this.cancelSources.forEach(function (source, url) { | ||
| _this_1.cancel(url); | ||
| }); | ||
| }; | ||
| return Resource; | ||
| }()); | ||
| export { Resource }; |
@@ -17,3 +17,8 @@ import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; | ||
| } | ||
| export interface ResourceDelayProperty extends ResourceRequestMethods { | ||
| } | ||
| export interface ResourceMayBeCancelProperty extends ResourceRequestMethods { | ||
| } | ||
| export interface ResourceRequestConfig extends AxiosRequestConfig { | ||
| url: string; | ||
| dataMapper?: (response: AxiosResponse) => any; | ||
@@ -26,3 +31,4 @@ processor?: (response: AxiosResponse) => any; | ||
| } | ||
| export interface ResourceDealyProperty extends ResourceRequestMethods { | ||
| export interface ResourceResponse extends AxiosResponse { | ||
| canceled: boolean; | ||
| } |
@@ -19,8 +19,10 @@ import Vue from 'vue'; | ||
| // clear delayed request | ||
| const { router } = app; | ||
| router.beforeEach((to, from, next) => { | ||
| // clear delayed request | ||
| resource.clearDelayedRequest(); | ||
| // cancel requests | ||
| resource.cancelAll(); | ||
| next(); | ||
| }); | ||
| }; |
+1
-1
| { | ||
| "name": "nuxt-resource-module", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "description": "@nuxtjs/axios based API request wrapper for Nuxt.js", | ||
@@ -5,0 +5,0 @@ "main": "dist/module.js", |
+48
-23
| # Nuxt.js Resource Module | ||
| ## ⚠️Under development⚠️ | ||
| ## ⚠️Alpha version | ||
| 正常に動かない可能性があります。 | ||
| There is a possibility that it does not move normally. | ||
| ## Status | ||
@@ -19,2 +16,4 @@ | ||
| - SSR 時は遅延させずにそのままリクエストします | ||
| - キャンセル可能なリクエストを簡単に作れます | ||
| - 遷移するときはリクエスト中のリクエストを自動でキャンセルします | ||
| - リクエスト時にレスポンスを加工する処理を追加できます | ||
@@ -49,26 +48,52 @@ | ||
| ```JavaScript | ||
| async asyncData({ app, error }) { | ||
| // default request | ||
| const response = await app.$_resource.get({ | ||
| url: '/users', | ||
| }); | ||
| export default { | ||
| // asyncData | ||
| async asyncData({ app, error }) { | ||
| // default request | ||
| const response = await app.$_resource.get({ | ||
| url: '/users', | ||
| }); | ||
| // delay request | ||
| const response = await app.$_resource.delay.get({ | ||
| url: '/users', | ||
| // response.data mapper | ||
| dataMapper(response: AxiosResponse) { | ||
| const { data } = response; | ||
| return data ? { users: data.users } : { users: [] }; | ||
| }, | ||
| // delay request | ||
| const response = await app.$_resource.delay.get({ | ||
| url: '/users', | ||
| // response.data mapper | ||
| dataMapper(response: AxiosResponse) { | ||
| const { data } = response; | ||
| return data ? { users: data.users } : { users: [] }; | ||
| }, | ||
| // response | ||
| processor(response: AxiosResponse) { | ||
| if (response.status !== 200) { | ||
| error({ statusCode: response.status, message: 'Request error' }) | ||
| // response | ||
| processor(response: AxiosResponse) { | ||
| if (response.status !== 200) { | ||
| error({ statusCode: response.status, message: 'Request error' }) | ||
| } | ||
| return response; | ||
| }, | ||
| }); | ||
| }, | ||
| // methods | ||
| methods: { | ||
| // cancel | ||
| async requestSuggestion() { | ||
| this.$_resource.cancel('/users'); | ||
| const response = await this.$_resource.mayBeCancel.get({ url: '/users' }); | ||
| if (response.canceled === true) { | ||
| // when cancel | ||
| } | ||
| return response; | ||
| }, | ||
| }); | ||
| }, | ||
| } | ||
| // Vuex | ||
| export const actions = { | ||
| async request() { | ||
| this.$_resource.cancel('/users'); | ||
| const response = await this.$_resource.mayBeCancel.get({ url: '/users' }); | ||
| if (response.canceled === true) { | ||
| // when cancel | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
@@ -75,0 +100,0 @@ |
27211
17.75%447
24.86%141
21.55%