前端页面axios连接后台服务器传输数据

---

前言

axios 是由 promise 封装的一个 http 的库。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 支持 Promise API
• 客户端支持防止CSRF
• 提供了一些并发请求的接口（重要，方便了很多的操作）
• 从 node.js 创建 http 请求
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据

二、使用步骤

http://localhost:5000/data代表服务端地址,then( response的response代表收到的数据；.catch(function (error)表示捕捉到的错误。

代码如下（示例）：

this.$axios.post('http://localhost:5000/data', {
          firstName: 'Fred',
          lastName: 'Flintstone'
        })
          .then( response =>  {
            console.log('dataaaa',response);

              this.details=[
                {content:'（1） 01：33||02：42||04：13处出现闪烁缺陷'},
                {content:'（2） 全片共出现三次闪烁缺陷'},
                {content:'（3） 01：33处闪烁缺陷高于正常值20%'},
                {content:'（4） 02：42处闪烁缺陷高于正常值30%'},
                {content:'（5） 04：13处闪烁缺陷低于正常值10%'}
              ]

          })
          .catch(function (error) {
            console.log(error);
          })

三、相关配置

代码如下（示例）：

配置

在src/main.js配置 axios，加入如下两行代码：

import axios from 'axios'

Vue.prototype.$axios= axios  

ajax的文章链接：https://blog.csdn.net/yangyaning123/article/details/117198344?spm=1001.2014.3001.5502