系列文章

【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连接后台服务器传输数据


前言

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

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

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐