vue.js与后端数据一般用什么框架进行交互?

axios:前端通信框架,因为vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,此时就需要额外使用一个通信框架与服务器交互;当然也可以使用jQuery提供的AJAX通信功能。

1.png

为啥选 axios ?

在 Vue 的开发过程中能实现发送网络请求的方式有很多种,下面详细看一下每种方式和选 axios 的原因:

1、传统的 Ajax 是基于 XMLHttpRequest(XHR)

因为在项目开发中封装它的过程比较麻烦,配置和调用方式也比较混乱,一般开发不会用这种方式,而是用 jQuery-Ajax 。

2、jQuery-Ajax,相对于传统的 Ajax 非常好用

jQuery-Ajax 相对于传统的Ajax来说就比较好用了,但是在 Vue 的开发过程中不需要使用 jQuery ,而且jQuery是个比较重量级的框架,没有必要为了方便进行一个网络请求,特意引入一个 jQuery。这是 jQuery-Ajax 的 传送门

3、Vue官方曾推出过 Vue-resource 插件

Vue-resource 的体积相对于 jQuery 小很多。但是到目前来Vue 2.0 版本推出之后,尤小右同学 说以后不再对 Vue-resource 进行维护和更新了,所以说继续用这种方式开发项目会有很大隐患哦。

4、官方 在说明不再继续更新和维护 Vue-resource 的同时,还推荐了一个框架 axios 。

axios 有非常多的优点并且用起来也非常方便,它支持在浏览器中发送 XMLHttpRequests 请求,支持在node.js中发送 http 请求,支持 Promise API,可以拦截请求和响应,可以转换请求和响应数据。

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求。

vue.js+axios实现后端数据交互

(1) 安装

在工程目录下,使用命令行:

npm install axios --save-dev

--save-dev以省掉手动修改package.json文件的步骤。

(2) 改写原型链

在main.js中引如axios。由于在其他组件中无法使用axios命令,所以需要将axios改写为Vue的原型属性。

import axios from 'axios' //引入axios
Vue.prototype.$ajax=axios //修改Vue的原型属性

(3) 在组件中使用

在组件的钩子函数中使用,与后端API交互。

mounted(){
//GET
    this.$ajax({
      method: 'get',
      // url:'../static/test/getInfo.json', //<---本地地址
      url: '/api/drummer/8bd17859',
    }).then(response=>{
      let _data=response.data;
      alert("hello," + _data.username);
    }).catch(function(err){
        console.log(err)
    })
    
    //POST
    this.$ajax({
      method: 'post',
      url: '/api/drummer',
      data:{
        code: '1234567',
        username: 'Joyce'
      }
    }).then(response=>{
    alert('post code done');
    }).catch(function(err){
        console.log(err)
    });
  }

解决IE兼容问题

在上文的介绍中,我们提到了浏览器的兼容性。IE9+是可以支持的,但是运行项目后,却发现不可以。为什么呢?

这是因为**IE整个家族都不支持promise。**如何解决?

(1) 安装es6-promise

npm install es6-promise --save-dev

(2) 引入

main.js中引入ES6的polyfill。
import Es6Promise from 'es6-promise'
Es6Promise.polyfill();

想要了解更多相关知识,可访问 前端学习网站!!

以上就是vue.js与后端数据一般用什么框架进行交互?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏