vue3-HTTP請求方式

2022-06-24 14:02:39

vue3-HTTP請求

jsonp原理結合node.js

伺服器端：

第15行，相當於在前端返回了js程式碼，呼叫show()

第19行相當於 20-22行程式碼

show被寫死了，最好的方式，使用者端把自己的函數名傳過去！如下：

傳參方法：

Get Post請求

1.匯入包： vue-resourse

2.呼叫get： this.$http.get(‘url引數’).then((() => { 回撥函數 }

3.呼叫post

設定根域名

emulateJSON：true

如果不帶上面的引數，就會出問題！！

所以也可以設定全域性

vue3-HTTP請求發出後,判斷哪裡出問題了

在請求後新增

.catch(function (error) {
    if (error.response) {
      // 請求成功發出且伺服器也響應了狀態碼，但狀態程式碼超出了 2xx 的範圍
      console.log("請求成功發出且伺服器也響應了狀態碼，但狀態程式碼超出了 2xx 的範圍");
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 請求已經成功發起，但沒有收到響應
      // `error.request` 在瀏覽器中是 XMLHttpRequest 的範例，
      // 而在node.js中是 http.ClientRequest 的範例
      console.log("請求已經成功發起，但沒有收到響應");
      console.log(error.request);
    } else {
      // 傳送請求時出了點問題
      console.log("傳送請求時出了點問題");
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

然後根據控制檯，返回的資訊判斷。

控制檯：結果頁面 -> 按F12 -> 點選控制檯

例如：

    service.get('/trace/'+sourceSearchInput.value).then(res => {
      dialogSearchResult.value.push(res);   //返回物件，push進去 & vue3中 取變數值-》變數.value
      //console.log(res);
    }).catch(function (error) {
    if (error.response) {
      // 請求成功發出且伺服器也響應了狀態碼，但狀態程式碼超出了 2xx 的範圍
      console.log("請求成功發出且伺服器也響應了狀態碼，但狀態程式碼超出了 2xx 的範圍");
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 請求已經成功發起，但沒有收到響應
      // `error.request` 在瀏覽器中是 XMLHttpRequest 的範例，
      // 而在node.js中是 http.ClientRequest 的範例
      console.log("請求已經成功發起，但沒有收到響應");
      console.log(error.request);
    } else {
      // 傳送請求時出了點問題
      console.log("傳送請求時出了點問題");
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。