Encountered some calling interface problems in the project. In order to solve the calling order problem.
Long time no see. . .
I believe that many small partners have encountered this kind of problem in development. After waiting for an interface to be called, we will get the value returned in the interface and then call the interface. For example, in the picture below, when we enter the interface, we first call the menu list of the stump on the left, then get the id of the first option, and then query the articles of a certain year.
Faced with the above problems, directly on the code
The vue file of the current page
<template>
<div class="me-list">
<div class="bd-w1200 publiContainer-flex" style="overflow: initial">
<!-- 侧边栏 -->
<div class="left-content">
<bdSidebar></bdSidebar>
<!-- 时间线 -->
<div class="time-line-content">
<div class="date-line"></div>
<ul>
<li
v-for="(dateItem, index) in timeLineList"
:key="index"
:class="timeIndex === index ? 'li-cur' : ''"
@click="changYear(index, dateItem.id)"
>
<div>{
{ dateItem.columnName }}年</div>
</li>
</ul>
</div>
</div>
<div class="publiContainer-1000 storyContainer">
<div v-if="articleList && articleList.length > 0">
<!-- 文章列表 -->
<ul class="dynamic-list">
<li
v-for="(dyItem, index) in articleList"
:key="index"
>
<div class="dynamic-title">
{
{ dyItem.title }}
</div>
<span class="dynamic-date">{
{ dyItem.createTime }}</span>
</li>
</ul>
<!-- 分页器 -->
<bdPagination
:pageSize="pageSize"
:total="total"
:currentPageParams="Number(currentPage)"
@changeCurrentPage="changeCurrentPage"
></bdPagination>
</div>
</div>
</div>
</div>
</template>
<script>
import bdSidebar from '@/components/bd-sidebar'
import bdPagination from '@/components/bd-pagination'
import { getStoryTimeLine } from './api/api'
import { indexListArticle } from '@/http/url'
export default {
components: {
bdSidebar,
bdPagination,
},
data() {
return {
timeIndex: null, // 时间线标识 //0为第一个
pageSize: 10,
currentPage: 1,
total: 0,
timeLineList: [], // 时间线数据
articleList: [], // 文章数据
timeLineColumnId: '' // 左侧时间线id
}
},
created() {
// 获取左侧时间线
this.getStoryTimeLineFn()
},
methods: {
// 获取时间线 并默认取第一个值 回显列表
getStoryTimeLineFn() {
return new Promise((resolve, reject) => {
getStoryTimeLine({ columnId: 949 }).then((res) => {
let { resultCode, result } = res.data
if (resultCode === 0) {
if (result.rows[0].list) {
this.timeLineList = result.rows[0].list || []
}
let firstId = this.timeLineList[0].id
//获取默认第一个值 进行文章列表数据
resolve(this.indexListArticleFn(firstId))
}
})
})
},
// 文章列表
indexListArticleFn(columnId) {
this.articleList = [] // 清空上一次数据
let params = {
columnId: columnId,
pageNum: this.currentPage,
pageSize: this.pageSize
}
indexListArticle(params).then((res) => {
let { resultCode, result } = res.data
if (resultCode === 0) {
this.articleList = result.rows
this.total = result.total
}
})
},
// 分页器
changeCurrentPage(data) {
this.currentPage = data
this.indexListArticleFn(this.timeLineColumnId)
},
// 点击时间
changYear(index, data) {
this.timeIndex = index
this.timeLineColumnId = data
this.currentPage = 1
this.indexListArticleFn(data)
}
}
}
</script>
<style lang="scss" scoped>
.left-content {
position: relative;
.time-line-content {
height: auto;
position: relative;
.date-line {
width: 3px;
min-height: 100%;
background-color: #dcdcdc;
margin: 0 auto;
border-radius: 3px;
}
ul {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
.li-cur {
color: #fff;
background-color: #1577da;
}
li {
width: 80px;
height: 36px;
margin: 10px 0;
text-align: center;
color: #fff;
background-color: #409eff;
border-radius: 25px;
display: flex;
justify-content: center;
align-content: center;
position: relative;
cursor: pointer;
transition: 0.3s all linear;
&:hover {
transform: scale(1.1);
background-color: #1577da;
}
div {
width: 90px;
height: 32px;
margin: 2px;
line-height: 28px;
border: 2px solid #fff;
border-radius: 25px;
}
&:nth-child(2n) {
margin-left: 40px;
border-radius: 25px;
div {
border-radius: 25px;
}
&::before {
content: ' ';
width: 5px;
height: 10px;
background-color: #1577da;
position: absolute;
left: 25px;
top: -10px;
}
}
}
}
.line-title {
max-width: 60px;
font-size: 16px;
line-height: 35px;
height: 35px;
margin: 30px 0;
text-align: center;
font-weight: 500;
cursor: pointer;
}
.line-title-active {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: #b30000;
color: #fff;
}
}
}
.me-list {
height: auto;
.storyContainer {
height: auto;
}
}
</style>Let’s not look at css first, it’s mainly a logical problem, the main code segment is as follows
methods: { // Get the timeline and echo the first value by default getStoryTimeLineFn() { return new Promise((resolve, reject) => { getStoryTimeLine({ columnId: 949 }).then((res) => { let { resultCode, result } = res.data if (resultCode === 0) { if (result.rows[0].list) { this.timeLineList = result.rows[0].list || [] }
let firstId = this.timeLineList[0].id
// Get the default first value to perform article list data
resolve(this.indexListArticleFn(firstId))
}
})
})
},
// Article list
indexListArticleFn(columnId) { this. articleList = [] // Clear the last data let params = { columnId: columnId, pageNum: this.currentPage, pageSize: this.pageSize } indexListArticle(params).then((res) => { let { resultCode, result } = res.data if (resultCode === 0) { this.articleList = result.rows
this.total = result.total
}
})
},
}
Promise is used here. If the first interface call is successful, resolve will be used to wrap the continued operation and continue to call another interface. If the call is not successful, the operation of calling the interface will not be executed.
Public components do not affect this function, and components do not need to be introduced during testing