Vue —— Axios 发送请求(常用格式)

简介: Vue —— Axios 发送请求(常用格式)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

基本格式

  axios
  .get('./carList.json') 
  .then(res => {
    this.info = res.data
  })
  .catch(function(error){
    console.log(error)
  })
  1. 1.get():链接地址,字符串表示
  2. 2.then():获取数据,存放到 info 数组里
  3. 3.catch():请求失败处理

例子

  new Vue({
    data: {
      carlist: [] //购物车列表
    },
    mounted() {
      // 在这里使用axios 发送请求
      axios
      .get('./carList.json') //文件相对路径
      .then(res => {
        this.carlist = res.data
      })
      .catch(error => {
        console.log(error)
      })
    }
  })

不积跬步无以至千里 不积小流无以成江海

相关文章
|
6天前
|
Python
axios的get请求传入数组参数
axios的get请求传入数组参数
|
3天前
|
JavaScript API
Vue中如何完成对axios的二次封装、统一接口管理
这篇文章介绍了在Vue项目中如何对axios进行二次封装,实现接口的统一管理和简化请求过程,包括创建api包、编写request.js、在main.js中引入封装好的axios以及在项目中发送请求的方法。
Vue中如何完成对axios的二次封装、统一接口管理
|
10天前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
16天前
|
JavaScript 前端开发
vue引入axios出现Module parse failed: Unexpected token (5:2)
vue引入axios出现Module parse failed: Unexpected token (5:2) 页面显示 Cannot GET /
|
30天前
|
JSON JavaScript 前端开发
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
在Vue项目中,高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁,其重要性不言而喻。本文将带您领略axios的魅力,从基本概念、安装方法,到高级应用技巧,助您快速掌握在Vue中利用axios进行HTTP请求的精髓。我们不仅会探讨axios的基础用法,如GET、POST请求,还将深入探索跨域配置、全局注册以及设置拦截器等高级功能,助您轻松实现优雅的前后端通信。
|
1月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
125 0
|
1月前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
|
1月前
|
JSON 数据格式
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
|
1月前
|
JavaScript
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
|
3天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)