vue學習：打開/刷新一個頁面時，觸發一個后端請求

由於業務系統最近更改了一些內部處理邏輯，所以我需要對應改造一下創建數據時調用的接口

之前的邏輯：創建合同時，每條數據需要先關聯一個項目，合同與項目之間是多對一的，也就是不同的合同可以關聯同一個項目。所以當初寫這個接口時，我把項目寫死了

現在的邏輯：合同與項目直接改為1對1，也就是一個項目只能被一個合同所關聯

 

最開始的思路是，寫一個創建項目的接口A，然后每次在創建合同時先調用接口A，然后查到這個項目引用即可，把邏輯都放在后端。

后來發現之前前端頁面中已經有一個創建項目的功能，所以只需要每次創建合同時，觸發下這個創建項目的請求就行，然后再去獲取創建好的項目

 

簡單拆解需求后，可以通過如下2種方式處理：

1、每次刷新頁面，都觸發一下創建項目的請求(這樣的話，只要刷新下頁面，我就可以得到一個新項目，然后這個新項目可以被合同綁定)

2、每次點擊創建合同的按鈕后，先執行創建項目的請求，然后執行創建合同的請求(創建好項目后，后端處理下把這個項目跟即將創建的合同綁定，接着執行創建合同，這樣每次創建合同時，都會跟最新的項目綁定)

方法1:刷新頁面后，執行創建項目的請求

打開頁面所在的vue文件，我這里是contract_create.vue

在methods下新增一個函數

methods: {

      get_project() {
        let url_hmk = "http://10.237.4.83:8000"
        let url2 = "http://10.237.6.72:8080"
        this.$http.get(url_hmk+"/create_operate/",
            {timeout: 10000,
              params: {
                project_name: ""
              }
            }
        )
      },
......
......
......
}

添加一個鈎子函數 created，在里面調用 get_project()

created() {
      this.get_project()
   },

效果如下，每次刷新頁面，都會觸發一個請求

方法2: 點擊按鈕后觸發2個請求 

在原有 submitForm() 函數下添加一個新的請求，它用來創建項目

submitForm(formName) {
        let url_hmk = "http://10.237.xx.xx:8000"
        let url2 = "http://10.237.xx.xx:8000"
        this.button_mark = true
        this.button_text = "正在提交..."
         this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.get(url_hmk+"/create_operate/", {timeout: 10000, params: { project_name: "" } } ) this.$http.get(url_hmk+"/data_factory/create_contract_data",
                          {
                            // timeout: 10000,
                            params:{
                              contract_name:this.ruleForm.contractid,
                              contract_classify_id:this.ruleForm.resource1,
                              contract_type_id:this.ruleForm.resource2,
                              status:this.ruleForm.resource3,
                            }

                        })
　　　　......
　　　　......
　　　　......

這樣其實點擊按鈕可以依次觸發2個請求，但是此時這2個請求是同時觸發的，當第一個請求觸發后，第二個請求並不等待第一個請求執行完就會開始執行，所以第一個請求產生的數據不會被第二個請求用到

 

需要更改下，讓第二個請求能夠使用第一個請求實時產生的數據

 submitForm(formName) {
        let url_hmk = "http://10.237.xx.xx:8000"
        let url2 = "http://10.237.xx.xx:8000"
        this.button_mark = true
        this.button_text = "正在提交..."
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            await this.$http.get(url_hmk+"/create_operate/",

                {timeout: 10000,
                  params: {
                    project_name: ""
                  }
                }
            )

            this.$http.get(url_hmk+"/data_factory/create_contract_data",
                          {
                            // timeout: 10000,
                            params:{
                              contract_name:this.ruleForm.contractid,
                              contract_classify_id:this.ruleForm.resource1,
                              contract_type_id:this.ruleForm.resource2,
                              status:this.ruleForm.resource3,
                            }

                        })