vue中请求的几种方式
script src=""/script
一个不错的项目
vue jsonp
一.万能的Jquery (在存在跨域的情况下，目前用Jquery来请求)
$.ajax({
url:'', //请求接口
type: "POST", //请求方式（跨域的话默认get提交，）
data: this.param, //请求参数
async:true, //是否异步
dataType: 'jsonp', // 返回数据类型
beforeSend: function(xhr,settings) {
}
}).then(function(data) {
console.log(data)
}
});
二. vue-resource
1，安装——npm install vue-resource
2.应用： this.$http.get('url',{
param1:value1,
param2:value2
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
console.log(response)
});
this.$http.post('url',{
param1:value1,
param2:value2
},{
emulateJSON:true
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
});
this.$jsonp('url', data ).then(json = {
json 就是返回数据
if(json.code != "002"){
alert(json.msg);
}else{
}
}).catch(err = {
console.log(err)
})
三. 、axios
1.使用npm install来进行安装。 使用npm install来进行安装。
2.在准备使用的vue页面中，引入Axios， import axios from 'axios'
//读取分类商品列表 created钩子函数中
GET: axios.get(''，{ })
.then(response={
console.log(response);
})
.catch(error={
console.log(error);
alert('网络错误，不能访问');
})
POST: axios.post('/user', { //默认json
firstName: 'Fred',
lastName: 'Flintstone' })
.then(function(response){
// response.data中获取ResponseData实体
})
.catch(function(error){
// 发生错误
});
在vue组件中使用axios的方法
现在我们通过webpack+vue-cli搭建起了一个vue项目的框架，如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢？
通常情况下，我们搭建好的项目目录应该是这样子的
首先需要安装axios，这个会npm的都知道
下一步，在main.js中引入axios
import
axios
from
"axios";
与很多第三方模块不同的是，axios不能使用use方法，转而应该进行如下操作
Vue.prototype.$axios
=
axios;
接着，我们就可以在App.vue中使用axios了
created:function(){
this.$axios.get("/seller",{"id":123}).then(res={
console.log(res.data);
});
}
以上这篇在vue组件中使用axios的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:在Vue组件化中利用axios处理ajax请求的使用方法详解axios在vue中的简单配置与使用详解Vue.js
2.0
如何使用axiosVue.js实战之使用Vuex
+
axios发送请求详解vue-axios使用详解
Vue如何使用axios异步请求后台
全局使用Axios
首先，在自己建的公用方法的文件中new一个新的HttpUtil.js文件。以下为HttpUtil.js的内容：
var axios = require('axios')// 配置项目根如路径var root = ''// axios请求function httpApi (method, url, params) { return new Promise((resolve, reject) = { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }).then(
(response) = {
resolve(response)
}
).catch(
(error) = {
reject(error)
}
)
})
}// 返回在vue模板中的调用接口export default { get: function (url, params) { return httpApi('GET', url, params)
}, post: function (url, params) { return httpApi('POST', url, params)
}, put: function (url, params) { return httpApi('PUT', url, params)
}, delete: function (url, params) { return httpApi('DELETE', url, params)
}
}
vue中axios怎么分服务
你好，vue中axios分服务需要在前端主机安装Nginx，配置Nginx主配置文件进行路由转发，启动Nginx服务器。希望以后帮助到你。