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)
      })
    }
  })

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

相关文章
|
11月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
419 1
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
303 6
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
220 7
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
2662 4
|
缓存 JavaScript 搜索推荐
|
资源调度 JavaScript
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
252 0
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
402 0
vue配合axios连接express搭建的node服务器接口_简单案例