Vue 前后端对接时判断是否与后端连接成功

使用 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 会处理抛出的错误信息，即可打印出 连接失败 和 相关的错误信息。