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

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

为啥选 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与后端数据一般用什么框架进行交互？的详细内容，更多请关注易知道|edz.cc其它相关文章！