【javascript基础——系列2】前端页面axios连接后台服务器传输数据

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

---

前言

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

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~