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

﹏ヽ暗。殇╰゛Y 2023-06-01 11:29 16阅读 0赞

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