版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。 本文鏈接：https://blog.csdn.net/Happyaileaf/article/details/101985533

Vue前后端對接時判斷是否與后端連接成功

• 使用 axios API
• • 連接成功
  • 連接失敗

使用 axios API

可以通過向 axios 傳遞相關配置來創建請求，再根據axios接收的數據判斷是否連接成功。

進入Vue項目，在 main.js 文件中加入以下新增的代碼，可以在網頁刷新的時候發送請求，在控制臺打印出相關的數據。

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' // 引入 axios import Qs from 'qs' // 使用工具qs來處理參數，處理發送請求的參數，序列化字符串 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>', }) // 提交數據 axios({url: '/api/aaa/bbb', // 后端的接口地址method: 'post',data: {username: "hello",password: "world"},transformRequest: [function (data) {data = Qs.stringify(data);return data;}],headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },dataType: "json" }).then(res => {console.log("連接成功"); // 這里多打印一句提示，只是為了更直觀一點console.log(res); // res 是后端回傳的數據，如果連接成功，可以把res打印出來。}).catch(function (error) {console.log("連接失敗"); // 作用同上console.log(error); // 如果連接失敗，會拋出錯誤信息。});

連接成功

連接成功，axios接收的數據會被 then 處理，即可打印出 連接成功 和接收到的數據。

連接失敗

連接失敗，axios請求進入錯誤處理，catch 會處理拋出的錯誤信息，即可打印出 連接失敗 和 相關的錯誤信息。

總結

以上是生活随笔為你收集整理的Vue前后端对接时判断是否与后端连接成功的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。