vue 异步请求

一、无参异步请求
假设有这么一个场景：点击一个submit按钮，弹出对话框：确认/取消，
点击确认，根据mock接口返回提示：test submit success
点击取消，关闭对话框。

testSubmit: function () {
    this.$confirm('确认提交吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
        requestSuccess2().then((res) => {
            console.log(res);
            // http status code
            console.log(res.status);
            console.log(res.data);
            console.log(res.data.code);
            //实际页面显示的信息
            this.$message({
                message: 'test submit success',
                type: 'success'
            });
        });
        //重置表单
        this.$refs['testForm'].resetFields();
    });
}

mock api

    mock.onGet('/success2').reply(config => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: 'api response success'
          }]);
        }, 500);
      });
    });

二、有参异步请求
假设有这么一个场景：点击一个submit按钮，弹出对话框：确认/取消，
点击确认，需求将表单的appname和description字段，作为参数传给api接口。
点击取消，关闭对话框。

<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
    <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
        <el-form-item label="appname" prop="appname">
            <el-input v-model="addForm.appname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="description">
            <el-input type="textarea" v-model="addForm.description"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">cancel</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">submit</el-button>
    </div>
</el-dialog>

定义接口发送
1、声明变量para，获取表单的参数， let para = Object.assign({}, this.addForm);
2、将para传给api接口 addSystemDetail(para)

addSubmit: function () {
    this.$refs.addForm.validate((valid) => {
      if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              let para = Object.assign({}, this.addForm);
              addSystemDetail(para).then((res) => {
                  this.addLoading = false;
                  this.$message({
                      message: '提交成功',
                      type: 'success'
                  });
                  this.$refs['addForm'].resetFields();
                  this.addFormVisible = false;
                  this.getSystemDetail();
              });
          }); // end this
      } // end if
    });
}

mock api

mock.onGet('/system/add').reply(config => {
    let { appname, description } = config.params;
    _SystemDetails.push({
        appname: appname,
        description: description
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: '新增成功'
          }]);
        }, 500);
      });
});