vue.js 想后端发送数据_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-promisenpm install es6-promise --save-dev

(2) 引入main.js中引入ES6的polyfill。

import Es6Promise from 'es6-promise'

Es6Promise.polyfill();

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