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())
    // }
  }
}
複製代碼