1、下载Nuxt封装的Axios依赖
npm install @nuxtjs/axios --save
2、在nuxt.config.js中的配置
export default {
modules: [
'@nuxtjs/axios',
],
axios: {
// proxy: true
}
}
3、使用
- 在asyncData中使用
async asyncData({ $axios }) {
const ip = await $axios.$get('http://icanhazip.com')
return { ip }
}
- 在 methods/created/mounted/etc 中使用
methods: {
async fetchSomething() {
const ip = await this.$axios.$get('http://icanhazip.com')
this.ip = ip
}
}
接下来就要封装api了
1、在plugins创建api.js
export default function ({ app, $axios, redirect }) {
const API = {};
API.getPublicKey = function (params) {
return $axios({
url: '/api/serviceConvergeRsa',
method: 'get',
data: params,
headers: {
'encrypt': 1
},
})
};
API.getServiceList = function (data, header={}) {
return $axios({
url: `/api/getServiceConvergeList`,
method: 'get',
params: data,
headers: header
})
};
app.api = API;
inject('api',API);
}
2、在nuxt.config.js中的配置
export default {
plugins: [
'~/plugins/api'
],
modules: [
'@nuxtjs/axios',
],
// 需要代理,可以打开底下的注释
// axios: {
// proxy: true
// },
// proxy: {
// '/api/': 'https://www.jianshu.com'
// },
}
3、使用
- 在asyncData中使用
async asyncData(context) {
// 请检查您是否在服务器端
// if (process.server) {}
const RSA_DATA = await context.app.api.getPublicKey({});
return RSA_DATA
}
- 在methods中使用
methods: {
// 获取我的服务列表
async getDatas() {
const params = { "activityType": 0 }
const headers = { }
const data = await this.$api.getServiceList (params, headers);
if (data.code == 200) {
this.serviceLis = data.data || []
} else {
console.log(获取列表失败)
}
}
}
接口缓存
1、下载lru-cache依赖
npm install lru-cache --save
2、在plugins创建globalCache.js
用于缓存数据
const LRU = require('lru-cache')
const cachePage = new LRU({
// 最大缓存数量
max: 10,
// 缓存过期时间(ms),缓存1小时
maxAge: 60 * 60 * 1000
})
module.exports = cachePage
3、修改api.js
const globalCache = require('./globalCache');
export default function ({ query, app, $axios, redirect }, inject) {
const API = {};
API.getPublicKey = function (params) {
// 页面请求附带refresh参数时,强制刷新数据
if (globalCache.get('serviceConvergeRsa') && globalCache.get('RSA_PUBLIC_KEY') && !query.refresh) {
return Promise.resolve(globalCache.get('serviceConvergeRsa'));
}
return $axios({
url: '/api/serviceConvergeRsa',
method: 'get',
data: params,
headers: {
'encrypt': 1
},
}).then(function (res) {
var RSA_DATA = res.data
if (RSA_DATA.code === 200) {
console.log('刷新serviceConvergeRsa密钥数据~');
// 设置缓存数据
globalCache.set('RSA_PUBLIC_KEY', RSA_DATA.data.rsaPublicKey, Number(RSA_DATA.data.expireTime));
globalCache.set('serviceConvergeRsa', RSA_DATA, Number(RSA_DATA.data.expireTime));
}else{
console.error('serviceConvergeRsa',RSA_DATA.message)
}
return Promise.resolve(res.data);
})
};
API.getServiceList = function (data, header={}) {
var globalCacheKey = 'getServiceConvergeList'
// 如果接口缓存有数据,且页面请求没有refresh参数,则返回缓存数据
if (globalCache.get(globalCacheKey) && !query.refresh) {
return Promise.resolve(globalCache.get(globalCacheKey));
}
return $axios({
url: `/api/getServiceConvergeList`,
method: 'get',
params: data,
headers: header
}).then(function (res) {
var result = res.data;
if (result.code == 200 && result.data) {
console.log('刷新getServiceConvergeList服务汇聚列表数据~');
// 设置缓存数据
globalCache.set(globalCacheKey, res.data);
}else{
console.error('getServiceConvergeList',result.message)
}
return Promise.resolve(res.data);
})
};
app.api = API;
}
其他配置以及使用 参考前面的api封装。
如有不足,请多多指教。
网友评论