版权声明：本文为博主原创文章，遵循 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 会处理抛出的错误信息，即可打印出 连接失败 和 相关的错误信息。
