需求:
1、 重复的请求,使用缓存
2、 不重复的请求,允许发送
3、 连续两次重复的发送,两次返回的结果是一样的,且第二次不发送请求
1、搭建前端服务
vue-cli 一步到位
<template>
<div class="hello">
<button v-on:click="getrs(1)">
北京
</button>
<button v-on:click="getrs(2)">
上海
</button>
</div>
</template>
<script>
let obj = {};
let flagArr = [];
let objPromise = {};
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
getrs(cityId) {
this.getCity(cityId).then((data) => {
console.log(data);
})
},
getCity(cityId) {
let promise = new Promise((resolve) => {
if(obj[cityId]) {
/**
* 如果命中缓存不发送请求了
*/
return resolve(obj[cityId]);
}
if(!flagArr.includes(cityId)) {
flagArr.push(cityId);
/**
* 第一次调用的话,请求数据,放到obj里
*/
this.axios.get('http://localhost:3000/?cityid='+cityId).then((response)=>{
return response
}).catch((response)=>{
return response
}).then(
(data) => {
let index = flagArr.indexOf(cityId);
flagArr.splice(index, 1);
obj[cityId] = data;
resolve(obj[cityId])
}
)
}
})
objPromise[cityId] = promise;
if(flagArr.includes(cityId)) {
/**
* 连续第二次调用的话,如果结果还没有回来,返回上个相同请求的promise
*/
return objPromise[cityId];
}
return promise;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2、后端服务,使用koa,也是一步到位搭建
const Koa = require('koa')
const app = new Koa()
app.use(async (ctx, next)=> {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
});
app.use(async(ctx)=>{
let url =ctx.url
//从request中获取GET请求
let request =ctx.request
let req_query = request.query
let req_querystring = request.querystring
//从上下文中直接获取
let ctx_query = ctx.query
let ctx_querystring = ctx.querystring
ctx.body={
url,
}
})
app.listen(3000,()=>{
console.log('server is starting at port 3000');
})
const Koa = require('koa')
const app = new Koa()
app.use(async (ctx, next)=> {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
});
app.use(async(ctx)=>{
let url =ctx.url
//从request中获取GET请求
let request =ctx.request
let req_query = request.query
let req_querystring = request.querystring
//从上下文中直接获取
let ctx_query = ctx.query
let ctx_querystring = ctx.querystring
ctx.body={
url,
}
})
app.listen(3000,()=>{
console.log('server is starting at port 3000');
})
3、测试结果
实现点击多次北京
一次请求,但是执行结果是一样的
来回点击北京上海
一共两次请求,北京的得到是北京的请求结果,上海得到是上海的请求结果