Antd 远程调用接口的使用方法

这是我参与8月更文挑战的第6天，活动详情查看： 8月更文挑战vue

promise是什么？api

一、主要用于异步计算promise

二、能够将异步操做队列化，按照指望的顺序执行，返回符合预期的结果markdown

三、能够在对象之间传递和操做promise，帮助咱们处理队列antd

为何会有promise？异步

为了不界面冻结（任务）post

同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动做，服务员却要你等到别人的一个大动做完成以后，才能再来招呼你，这个即是同步的问题：也就是“顺序交付的工做1234，必须按照1234的顺序完成”。异步：则是将耗时很长的A交付的工做交给系统以后，就去继续作B交付的工做，。等到系统完成了前面的工做以后，再经过回调或者事件，继续作A剩下的工做。 AB工做的完成顺序，和交付他们的时间顺序无关，因此叫“异步”。this

1.promise简单用法url

function2(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是须要返回的数据*/)
}

function3(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是须要返回的数据*/)
}

// 调用
function1(){
    this.function2().then(val => { 
        this.function3();
    });
}
复制代码

2.promise高阶用法spa

init1(){
return new Promise((resolve, reject) => {
    let data={
        dateStr:this.time
    };
    api.get('url', null).then( res => {
       //本身的操做
        resolve()
    }).catch(err => {
        reject()
    });
});
};
init2(){
return new Promise((resolve, reject) => {
    let data={
        dateStr:this.time
    };
    api.get('url', null).then( res => {
       //本身的操做
        resolve()
    }).catch(err => {
        reject()
    });
});
};


//调用
Promise.all([this.init1(),this.init2()]).then(() => {
    //两个都调成功之后执行的操做
//主要是loading问题
}).catch(err => {
    // 抛出错误信息
});

复制代码

增删改查逻辑实现

src/views/test/MyTestCaseList.vue

methods: {
  handleAdd () {
    this.modalInfo.title = '新增'
    this.mdl = null
    this.visible = true
  },
  handleEdit (record) {
    this.modalInfo.title = '修改'
    this.visible = true
    this.mdl = { ...record }
  },
  handleOk () {    
    const form = this.$refs.createModal.form
    this.confirmLoading = true
    form.validateFields((errors, values) => {
      if (!errors) {
        console.log('values', values)
        if (values.id > 0) {
          // 修改 e.g.
          return new Promise((resolve, reject) => {
            updateItem(values).then(response => {
              if (response.status === 200) {
                  this.visible = false
                  this.confirmLoading = false
                  // 重置表单数据
                  form.resetFields()
                  // 刷新表格 table API 参考 https://www.antdv.com/components/table-cn/#API
                  this.$refs.table.refresh()

                  this.$message.success('修改为功')
              } else {
                  // message(alter) 参考文档 https://www.antdv.com/components/alert-cn/#API
                this.$message.error('修改失败，请稍后重试！')
              }
              resolve(response)
            }).catch(error => {
              reject(error)
            })
          })
        } else {
          // 新增
          return new Promise((resolve, reject) => {
            addItem(values).then(response => {
              if (response.status === 200) {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()
                this.$message.success('新增成功')
              } else {
                this.$message.error('新增失败，请稍后重试！')
              }
              resolve()
            }).catch(error => {
              reject(error)
            })
            resolve()
          })
        }
      } else {
        this.confirmLoading = false
      }
    })
  },
  handleCancel () {
    this.visible = false
    const form = this.$refs.createModal.form
    form.resetFields() // 清理表单数据（可不作）
  },
  // row ,当前行数据
  handleDelete(row) {
    // 外部获取对象，不然在‘this.$confirm’没法调用
    const table = this.$refs.table
    const msg = this.$message
    console.info('table===>', table)
    this.$confirm({
      title: '警告',
      content: `真的要删除 ${row.id} 吗?`,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk () {
        console.log('OK')
        // 在这里调用删除接口
        return new Promise((resolve, reject) => {
          deleteItem(row).then((res) => {
              // 成功进入此方法体
            console.info('deleteItem res ===> ', res)
            if (res.status === 200) {
              msg.success('删除成功')
              table.refresh()
            } else {
              msg.error('删除失败，请稍后重试！')
            }
          }).catch(() => {
              // 异常进入此方法体
            console.log('Oops errors!')
          })
          resolve()
        })
      },
      onCancel () {
        console.log('Cancel')
      }
    })
  },
  handleSub (record) {
    // if (record.status !== 0) {
    //   this.$message.info(`${record.no} 订阅成功`)
    // } else {
    //   this.$message.error(`${record.no} 订阅失败，规则已关闭`)
    // }
  },
  onSelectChange (selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  },
  toggleAdvanced () {
    // this.advanced = !this.advanced
  },
  resetSearchForm () {
    // this.queryParam = {
    //   date: moment(new Date())
    // }
  }
}
复制代码