vue2.0 axios前后端数据处理实例代码

网络编程 2024/10/6 佚名

3 2 1

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。

前言：

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时

引入

为了解决这个问题，是在引入 axios 之后，修改原型链具体的实施请往下看~

改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令

methods: {
 but_ajax() {
  this.$ajax({
   method: 'post',
   url: 'http://192.168.0.113:8080/llhb/m/requirement/allCategor',
   params: {          //需要发送的数据
    name: 'zhangwenwu2',
    age: '15'
   }
  })
  //请求成功后执行then     如果直接在里面访问 this，无法访问到 Vue 实例，this指向发生了变化。建议使用箭头函数,下面有讲
  .then(function (response) {
    console.log(response);  //处理后台返回的数据
   }) 
  //请求失败后执行catch
  .catch(function(err){
    console.log(err)
   })
}

附录：配置 axios

上面封装的方法中，使用了 axios 的三个配置项，实际上只有 url 是必须的，完整的 api 可以参考使用说明

为了方便，axios 还为每种方法起了别名，比如上面的 saveForm 方法等价于：

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

当请求成功时，会执行 .then，否则执行 .catch

这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例，this指向发生了变化。

这时只要添加一个 .bind(this) 就能解决这个问题,或者使用箭头函数即可

.then(function(res){
 console.log(this.data)
}.bind(this))

 .then((res) => {
 console.log(this.data)
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue,数据处理,vue2.0,axios数据处理

标签：

vue,数据处理,vue2.0,axios数据处理

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue2.0 axios前后端数据处理实例代码”

vue2.0 axios前后端数据处理实例代码

暂无“vue2.0 axios前后端数据处理实例代码”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年10月06日

vue2.0 axios前后端数据处理实例代码

vue,数据处理,vue2.0,axios数据处理

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

评论“vue2.0 axios前后端数据处理实例代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接