浅谈Vue知识系列-axios

目录
  • axios基础知识
  • axios应用场景

axios基础知识

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。

在浏览器中可以帮助我们完成ajax请求的发送在node.js中可以向远程接口发送请求

axios应用场景

axios的使用

第一步：创建html文件，在body中引入两个js文件：

 <script src="vue.min.js"></script>
 <script src="axios.min.js"></script>

第二步：axios调用的固定结构

<script>
   new Vue({
      el:"#app",
            //axios固定结构：data，created，methods
      data:{ //在data中定义变量和初始值
      },
      created(){//页面渲染之前执行
          //调用自定义的方法
          this.save()
      },
      methods:{   //编写具体的方法
          //自定义方法
         save(){}
      }
   })
</script>
<script>
   new Vue({
      el:"#app",
      //axios固定结构：data，created，methods
      data:{ //在data中定义变量和初始值
          userList:[]
      },
      created(){//页面渲染之前执行
          //调用自定义的方法
          //this表示当前vue对象，使用data中的变量和methods中的方法都需要加this
          this.getUserList()
      },
      methods:{   //编写具体的方法
          //自定义方法
          getUserList(){
              //使用axios发送ajax请求
              //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
              axios.get("data.json")
                   .then(response =>{ //response变量表示axios请求返回的数据
                       this.userList = response.data.data.items
                   })//请求成功执行then方法
                   .catch(error=>{//error变量表示axios请求返回的错误信息

                   })//请求失败执行catch方法
           }
        }
  })
</script>

使用axios发送ajax请求，请求文件，得到数据，在页面显示

data.json文件 

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"张三","age":22},
            {"name":"李四","age":33},
            {"name":"王五","age":18}
        ],
        "total":3
    }
}

到此这篇关于浅谈Vue知识系列-axios的文章就介绍到这了,更多相关Vue-axios内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中的计算属性和axios基本使用回顾

    目录 1. 什么是计算属性 2. 计算属性的特点 计算属性 3. 如何声明计算属性 4. 计算属性的使用注意点 5. 计算属性 vs 方法 6. axios axios的基本使用 总结 1. 什么是计算属性 计算属性本质上就是一个function 函数,它可以实时监听data 中数据的变化,并 return 一个计算后的新值,  供组件渲染 DOM 时使用. 计算属性指的是通过一系列运算之后,最终得到一个属性值. 这个动态计算出来的属性值可以被模板结构或methods 方法使用. 示例代码如下:

  • Vue如何处理Axios多次请求数据显示问题

    目录 Vue处理Axios多次请求数据显示 服务端代码 客户端代码 vue axios多次请求一个接口取消前面请求 方法一 方法二 总结 Vue处理Axios多次请求数据显示 场景: 一个搜索框,要求用户输入内容改变之后立即进行搜索 遇到的问题: 用户频繁的进行搜索词修改,会触发很多次搜索请求,如果请求有延时,就会出现显示不正确的现象 比如下面这个例子: 请求1发出后,存在延时大,响应1后返回: 请求2发出后,延时小,响应2先返回: 最后显示的内容是响应1: 而我期待的显示内容,是最后一次的请求

  • Vue封装axios的示例讲解

    1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 (1)在node.js中使用的原生的http模块 (2)在浏览器中使用的XMLHttpRequest 2.vue中的使用方法 (1)安装:npm install axios (2)引用方法: 原生的方式(不推荐使用) axios({ url:'http://127.0.0.1:9001/students/test', //远程服务器的url method:'get', //请求方式

  • Vue Axios异步与数据类型转换问题浅析

    目录 axios 请求中异步与否问题 不使用异步的例子 使用异步的例子 对象与数组转换 axios 请求中异步与否问题 众所周知,axios 请求有些请求需要配合异步函数来实现,我大概总结了两种适配场景: 不使用异步:后端响应值对后续操作无影响,我们仅需要判断这个请求是否成功的情况下 使用异步:我们需要存储后端响应值并使用它进行某些渲染操作 不使用异步的例子 参考我们上一节的最后一块,我们抽离了登录校验的 axios 请求,这是具体代码 可见,我们只需要把本地 token 传递给后端,经过后端

  • Vue.js axios响应拦截如何获取返回状态码

    目录 axios响应拦截获取返回状态码方式整理 方法一 方法二 方法三 Vue的axios拦截器用法 总结 axios响应拦截获取返回状态码方式整理 方法一 axios.interceptors.response.use( response => { console.log('拦截器响应成功') return response }, error => { console.log('拦截器响应失败') console.log(error) if(error.request){ console.l

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • 浅谈Vue知识系列-axios

    目录 axios基础知识 axios应用场景 axios基础知识 axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端. 在浏览器中可以帮助我们完成ajax请求的发送在node.js中可以向远程接口发送请求 axios应用场景 axios的使用 第一步:创建html文件,在body中引入两个js文件: <script src="vue.min.js"></script> <script src="axi

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • 浅谈Vue入门需掌握的知识

    浅谈Vue入门需掌握的知识

    Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择.最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解. 一.定义 Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台. 形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期,下面会一个个详细介绍. 二.为什么要用Vue? 1. 组件化 Vue

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • 浅谈vue获得后台数据无法显示到table上面的坑

    因为刚学vue然后自己自习了一下axios,然后想写一个简单的查询后台数据 <tr v-for=" user in uList"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.gender}}</td> </td> </tr> 然后先是写了这样一个代码 created: function () { axios.ge

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • 浅谈Vue使用Elementui修改默认的最快方法

    浅谈Vue使用Elementui修改默认的最快方法

    相信大家都需要过,在Vue中使用Elementui的时候,遇到最多也最蛋疼的问题就是修改默认样式,接下来直奔主题: // template <el-progress :text-inside="true" :stroke-width="26" :percentage="70" ></el-progress> 默认样式 方法1 1.找默认添加的类名 2.去掉scoped,scoped是Vue是限制独立组件中的CSS样式不被溢

  • 浅谈vue的踩坑路

    ------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径app.use('/data',express.static('./data')) ... app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.d

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    html中: <div class="charts1"/> <div class="charts2"/> <div class="charts3"/> <div class="charts4"/> <div class="charts5"/> <div class="charts6"/> <div class=

随机推荐