axios不支持java吗_vue中使用axios

axios

基于http客户端的promise，面向浏览器和nodejs

特色

浏览器端发起XMLHttpRequests请求

node端发起http请求

支持Promise API

监听请求和返回

转化请求和返回

取消请求

自动转化json数据

客户端支持抵御

安装

使用npm：

npm install axios --save

为了解决post默认使用的是application/json请求数据 ，导致请求参数无法传递到后台，所以还需要安装一个插件QS,此插件将application/json转换为application/x-www-from-urlencoded

npm install qs --save

一个命令全部解决

npm install --save axios vue-axios qs

使用

修改原型链

首先在 main.js 中引入 axios

import Axiso from 'axiso'

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

Vue.prototype.$axios= Axios

配置好了之后就可以全局使用了

post请求转换

import QS from 'qs'

if(config.method=='post'){

config.data=QS.stringify(config.data);//防止post请求参数无法传到后台

}

实例使用:

axios({

method: 'post',

url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'

})

.then((response)=>{

console.log(response.data)

})

.catch((error)=>{

console.log(error)

})

axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{

miaov:"课堂" //发送的数据

})

.then((response)=>{

console.log(response.data)

})

.catch((error)=>{

console.log(error)

})

发送带参数的

//get方式发送数据

axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {

params: {

pomelo: 'tt',

test: 'test'

}

}).then((response) => {

console.log(response)

}).catch((error) => {

console.log(error)

})

//post方式发送数据

axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {

pomelo: 'tt',

test: 'test'

}).then((response) => {

console.log(response)

}).catch((error) => {

console.log(error)

})