在项目中遇到一些调用接口问题。为了解决调用顺序问题。
久违了。。。
相信很多小伙伴在开发中遇到过这种问题，等待一个接口调用完毕，我们再拿到接口里面返回的值，再去调用接口。例如下图，我们进入界面先是调用了左侧树桩的菜单列表，然后拿到第一个选项的id，再去进行查询某一年的文章。
面对如上问题，直接上代码了
当前页的vue文件
<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>css 先不看了，主要是逻辑问题，主要代码段如下
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
}
})
},
}
这里用promise ，如果第一个接口调用成功，则用resolve，包裹继续执行的操作，继续调用另一个接口，如果没有调用成功，则不执行调用接口的操作。
公共组件不影响该功能，测试的时候可以不引入组件