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

vue.js 想后端发送数据_vue.js与后端数据一般用什么框架进行交互?_第1张图片

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

vue.js 想后端发送数据_vue.js与后端数据一般用什么框架进行交互?_第2张图片

为啥选 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();

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

你可能感兴趣的:(vue.js,想后端发送数据)