nuxt-resource-module
Advanced tools
$ yarn add nuxt-resource-module
module.exports = {
// ...
modules: [
'nuxt-resource-module', // required before @nuxtjs/axios
'@nuxtjs/axios',
],
// ...
// options (See options section)
'resource-module': {
methods: ['get', 'post'],
},
};
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: ResourceResponse) {
const { delayed, data } = response;
return delayed ? { users: [] } : { users: data.users };
},
// response
processor(response: ResourceResponse) {
if (response.status !== 200) {
error({ statusCode: response.status, message: 'Request error' })
}
return response;
},
});
},
// methods
methods: {
// cancel
async searchUser() {
this.$_resource.cancel('/users/search');
const response = await this.$_resource.mayBeCancel.get({ url: '/users/search' });
if (response.canceled === true) {
// when cancel
}
},
},
}
// Vuex
export const actions = {
async searchUser() {
this.$_resource.cancel('/users/search');
const response = await this.$_resource.mayBeCancel.get({ url: '/users/search' });
if (response.canceled === true) {
// when cancel
}
}
}
クライアントとサーバーで動作が変わります。
There are client and server behavior changes.
client: asyncData または fetch で利用した場合は、遷移が確定してからリクエストが呼ばれます。
server: デフォルトメソッドを使ったときと同じです。使ったときにそのままリクエストを送ります。
client: When used with asyncData or fetch, it is called after the transition is confirmed.
server: Same as default method. Send a request when called.
キャンセル可能なリクエストになります。$_resource.cancel()と一緒に使います。
It will be a request that can be canceled. Use with $_resource.cancel().
next function of beforeRouteEnter.Extends AxiosRequestConfig
export interface ResourceRequestConfig extends AxiosRequestConfig {
url: string;
dataMapper?: (response: ResourceResponse) => any;
processor?: (response: ResourceResponse) => any;
}
e.g.
{
url: '/users/search', // require
params: { // Can also use axios config
query: 'Alice',
},
dataMapper(response) { // option
const { delayed, data } = response;
return delayed ? { users: [] } : { users: data.users };
},
processor(response) { // option
if (response.status !== 200) {
error({ statusCode: response.status, message: 'Request error' })
}
return response;
},
}
Extends AxiosResponse
export interface ResourceResponse extends AxiosResponse {
canceled: boolean;
delayed: boolean;
}
export default ({ app }) => {
const { $_resource } = app;
const eachProcessor = (response) => {
return {
status: response.status,
isError: response.status !== 200,
data: response.data,
};
};
$_resource.setEachProcessor(eachProcessor);
};
module.exports = {
// ...
modules: [
'nuxt-resource-module', // required before @nuxtjs/axios
'@nuxtjs/axios',
],
// ...
plugins: [
'~/plugins/resource-module',
],
};
export default {
async asyncData({ app }) {
const response = await app.$_resource.get({
url: '/users',
});
console.log(response) // { status: 200, isError: false, data: ... }
},
};
['get', 'delete', 'head', 'post', 'put', 'patch']使うリクエストメソッドを定義できます。
e.g.
// nuxt.config.js
module.exports = {
// ...
'resource-module': {
methods: ['get'],
},
};
When
async asyncData({ app }) {
// ok
const response = await app.$_resource.get({
url: '/users',
});
// undefined
const response = await app.$_resource.post({
url: '/users',
data: {
name: 'new user',
},
});
},
FAQs
@nuxtjs/axios based API request wrapper for Nuxt.js
The npm package nuxt-resource-module receives a total of 18 weekly downloads. As such, nuxt-resource-module popularity was classified as not popular.
We found that nuxt-resource-module demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.