曾经，我非常羡慕那些人见人爱的人，我也想要变成那样，可是后来我才明白人见人爱也是需要天赋的，后来我开始默默努力，我想，就算我不能让每个人都喜欢我，至少因为我做的努力能得到别人的尊重。
& axios文档
在处理http请求方面，已经不推荐使用vue-resource了，而是使用最新的axios，下面做一个简单的介绍。
npm install axios
&script src="https://unpkg.com/axios/dist/axios.min.js"&&/script&
基本使用方法
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
// Optionally the request above could also be done as
axios.get('/user', {
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
.then(function (response) {
console.log(response);
.catch(function (error) {
console.log(error);
同时执行多个请求
function getUserAccount() {
return axios.get('/user/12345');
function getUserPermissions() {
return axios.get('/user/12345/permissions');
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
这个的使用方法其实和原生的ajax是一样的，一看就懂。
使用 application/x-www-urlencoded 形式的post请求：
var qs = require('qs');
axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
"isSingle": 1,
"catalog3": ,
"offset": 0,
"pageSize": 25
headers: {
"BBG-Key": "ab9ef204--b229-3cc",
.then(function (response) {
// if (response.data.code == 626) {
console.log(response);
}).catch(function (error) {
console.log(error);
具体使用参考文档：&https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format
注意： 对于post请求，一般情况下，第一个参数是url，第二个参数是要发送的请求体的数据，第三个参数是对请求的配置。
另外：axios默认是application/json格式的，如果不适用 qs.stringify 这种形式， 即使添加了请求头 最后的content-type的形式还是 json 的。&
对于post请求，我们也可以使用下面的jquery的ajax来实现：
url:'api/bbg/goods/get_goods_list_wechat',
'data': JSON.stringify({
"isSingle": 1,
"catalog3": ,
"offset": 0,
"pageSize": 25
beforeSend: function(request) {
request.setRequestHeader("BBG-Key", "ab9ef204--b229-3cc");
type:'post',
dataType:'json',
success:function(data){
console.log(data);
error: function (error) {
console.log(err);
complete: function () {
显然，通过比较，可以发现，jquery的请求形式更简单一些，且jqury默认的数据格式就是 application/x-www-urlencoded ，从这方面来讲会更加方便一些。
另外，对于两个同样的请求，即使都请求成功了，但是两者请求得到的结果也是不一样的，如下：
不难看到： 使用axios返回的结果会比jquery的ajax返回的结构（实际的结果）多包装了一层，包括相关的config、 headers、request等。
对于get请求， 我个人还是推荐使用axios.get()的形式，如下所示：
axios.get('/bbg/shop/get_classify', {
headers: {
"BBG-Key": "ab9ef204--b229-3cc"
.then(function (response) {
if (response.data.code == 130) {
items = response.data.
store.commit('update', items);
console.log(items);
console.log(response.data.code);
}).catch(function (error) {
console.log(error);
console.log(this);
即第一个参数是：url， 第二个参数就是一个配置对象，我们可以在配置对象中设置 params 来传递参数。&
个人理解为什么get没有第二个参数作为传递的查询字符串，而post有第二个参数作为post的数据。
　　因为get可以没有查询字符串，也可以get请求，但是post必须要有post的数据，要不然就没有使用post的必要了。
参考文章：
阅读(...) 评论()
一分耕耘，一分收获。Vue--axios：vue中的ajax异步请求（发送和请求数据）
时间： 11:19:56
&&&& 阅读：262
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一.使用axios发送get请求
1 &!DOCTYPE html&
2 &html lang="en"&
4 &meta charset="UTF-8"&
5 &meta name="viewport" content="width=device-width, initial-scale=1.0"&
6 &meta http-equiv="X-UA-Compatible" content="ie=edge"&
7 &title&Document&/title&
8 &script src="../vue2.4.4.js"&&/script&
9 &script src="../axios.js"&&/script&
11 &/head&
14 &!-- 定义一个vue的管理区块，（MVVM中的View） --&
15 &div id="app"&
&button @click="getApiData"&点击得到数据&/button&
20 &/body&
22 &script&
// 实例化vue对象（MVVM中的View Model）
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:‘#app‘,
// 数据 （MVVM中的Model）
getApiData:function() {
//设置请求路径
= "http://157.122.54.189:9093/api/getprodlist";
// 发送请求:将数据返回到一个回到函数中
_this= this;
// 并且响应成功以后会执行then方法中的回调函数
axios.get(url).then(function(result) {
// result是所有的返回回来的数据
// 包括了响应报文行
// 响应报文头
// 响应报文体
console.log(result.data.message[0]);
_this.name = result.data.message[0].
50 &/script&
51 &/html&
二.使用axios发送post请求
1 &!DOCTYPE html&
2 &html lang="en"&
4 &meta charset="UTF-8"&
5 &meta name="viewport" content="width=device-width, initial-scale=1.0"&
6 &meta http-equiv="X-UA-Compatible" content="ie=edge"&
7 &title&Document&/title&
8 &script src="../vue2.4.4.js"&&/script&
9 &script src="../axios.js"&&/script&
11 &/head&
14 &!-- 定义一个vue的管理区块，（MVVM中的View） --&
15 &div id="app"&
&button @click="postApiData"&点击提交数据&/button&
19 &/body&
21 &script&
// 实例化vue对象（MVVM中的View Model）
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:‘#app‘,
// 数据 （MVVM中的Model）
postApiData:function() {
var url = "http://157.122.54.189:9093/api/addproduct";
// post有两个参数
//参数1:请求的路径
//参数2:提交的参数
//提交参数的两种形态:
1.可以直接传入字符串 name=张三&age=19
2.可以以对象的形式传入{name:"三",age:19}
axios.post(url,{name:"拖油瓶前来报道"}).then(function(res) {
var resData = res.
if(resData.status == "0") { //0表示成功，1表示失败
alert(resData.message);
alert(resData.message);
51 &/script&
52 &/html&
三.使用axios发送post或get请求细节处理
1 &!DOCTYPE html&
2 &html lang="en"&
4 &meta charset="UTF-8"&
5 &meta name="viewport" content="width=device-width, initial-scale=1.0"&
6 &meta http-equiv="X-UA-Compatible" content="ie=edge"&
7 &title&Document&/title&
8 &script src="../vue2.4.4.js"&&/script&
9 &script src="../axios.js"&&/script&
11 &/head&
14 &!-- 定义一个vue的管理区块，（MVVM中的View） --&
15 &div id="app"&
&button @click="getApiData"&点击得到数据&/button&
&button @click="postApiData"&点击提交数据&/button&
22 &/body&
24 &script&
//细节处理一：可以给axios的ajax请求设置统一的主机和端口号
axios.defaults.baseURL = "http://157.122.54.189:9093/";
//细节处理二: 可以将axios这个对象添加到Vue的原型对象中，将来在使用的时候就只需要使用this.对象名就可以了
Vue.prototype.$http =
// 实例化vue对象（MVVM中的View Model）
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:‘#app‘,
// 数据 （MVVM中的Model）
getApiData:function() {
//设置请求路径
= "api/getprodlist";
// 发送请求:将数据返回到一个回到函数中
_this= this;
// 并且响应成功以后会执行then方法中的回调函数
this.$http.get(url).then(function(result) {
// result是所有的返回回来的数据
// 包括了响应报文行
// 响应报文头
// 响应报文体
_this.name = result.data.message[0].
}).catch(function(){
alert("出错了");
postApiData:function() {
var url = "api/addproduct";
// post有两个参数
//参数1:请求的路径
//参数2:提交的参数
//提交参数的两种形态:
1.可以直接传入字符串 name=张三&age=19
2.可以以对象的形式传入{name:"三",age:19}
this.$http.post(url,{name:"拖油瓶前来报道3 "}).then(function(res) {
var resData = res.
if(resData.status == "0") { //0表示成功，1表示失败
alert(resData.message);
alert(resData.message);
}).catch(function(){
alert("出错了");
79 &/script&
80 &/html&
四.使用axios完成品牌管理
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&meta http-equiv="X-UA-Compatible" content="ie=edge"&
&title&Document&/title&
width: 600
margin: 10
border-collapse:
width: 100%;
background-color: #0094
padding: 5
text-align:
padding: 5
margin-bottom: 10
&script src="../vue2.4.4.js"&&/script&
&script src="../axios.js"&&/script&
40 &/head&
&div id="app"&
&div class="add"&
品牌名称: &input v-model="name" type="text"&
&button @click="add"&添加&/button&
&div class="add"&品牌名称：&input type="text"&&/div&
&table class="tb"&
&th&编号&/th&
&th&品牌名称&/th&
&th&创立时间&/th&
&th&操作&/th&
&tr v-if="list.length &= 0"&
&td colspan="4"&没有品牌数据&/td&
&!--加入: key="index" 时候必须把所有参数写完整
&tr v-for="(item,key,index) in list" :key="index"&
&td&{{item.id}}&/td&
&td&{{item.name}}&/td&
&td&{{item.ctime}}&/td&
&td&&a href="#" @click="del(item.id)"&删除&/a&&/td&
71 &/body&
73 &/html&
75 &script&
// 1 将所有的主机名和端口 一起设置
axios.defaults.baseURL = "http://157.122.54.189:9093";
// 2 将axios添加到Vue的原型对象中
Vue.prototype.$http =
var vm = new Vue({
el: "#app",
name: ‘‘,
// 数据应该来源于服务器提供的api
mounted:function() { //钩子函数
this.getList();
methods: {
// 得到所有的列表数据,这个方法应该等页面加载完成以后直接被调用的
getList:function() {
var url = "/api/getprodlist";
// 改变this的指向
_this = this;
this.$http.get(url).then(function(result){
var res = result.
if(res.status ==
//将数据赋值给list
_this.list = res.
alert("出错了");
}).catch(function(){
alert("出错了");
// 得到文本框中的值，并且将值通过api提交到服务器
add:function() {
var url = "/api/addproduct";
_this = this;
// 得到name属性对应的值
this.$http.post(url,{"name":this.name}).then(function(result){
var res = result.
if(res.status == "0") {
alert(res.message);
_this.getList();
alert(res.message);
}).catch(function() {
alert("出错了");
del:function(id){
//格局id删除数据
"/api/delproduct/"+
// 发送异步请求
_this = this;
this.$http.get(url).then(function(result){
var res = result.
if(res.status == "0") {
alert(res.message);
//更新数据
_this.getList();
alert(res.message);
}).catch(function(){
alert("出错了");
147 &/script&
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文地址：http://www.cnblogs.com/mrszhou/p/7859012.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！请问 axois 发起请求的时候在 chrome 里面为什么一直是 pending 状态? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
请问 axois 发起请求的时候在 chrome 里面为什么一直是 pending 状态?
· 67 天前 · 331 次点击
帖子接续这里
/t/447586,
后面看网络请求在首页的时候 axois 向另一台服务器发送请求的时候一直保持在 pending 状态,需要刷新一下,但是换用 firefox 和 edge 不会,而且网站里面另一个请求也不会被 pending,求问这是什么原因?
有搜到这个解决办法
不过感觉有点麻烦,请问还有其他解决方式吗?(除了更换浏览器)
2 回复 &| &直到
14:00:43 +08:00
& &67 天前
是不是先后顺序的原因，我记得之前也碰到过类似的问题，后来好像 是改了排序的问题就解决了吧
& &66 天前
@ 请问什么先后顺序呢?好像没有排序问题, 我是在页面 mount 的时候会发起一次请求,就卡在请求这里了(v2 有消息回复竟然没有提醒
& · & 1599 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 17ms · UTC 15:40 · PVG 23:40 · LAX 08:40 · JFK 11:40? Do have faith in what you're doing.在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想在axios取到数据后赋值给this.datas.lists。如果直接写this.datas.lists = res.data是没有问题的，但是我把this.datas.lists当参数传进来就无论如何都赋值不成功，请求是成功的，请问是为什么？谢谢
如图所示，这样请求数据是没问题的但是将数据赋值给message这个参数，this.datas.lists仍然是空的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1.解决方法
使用push()方法,就可以了：
getDate(link,message) {
this.$http.get(url).then(res=& {
this.datas.lists .push(res.data);
2.问题理解
目测你的参数this.datas.lists应该是数组类型 [ ]，数组类型属于引用类型，传参的时候属于引用传递。我感觉你应该在问：我既然用的是引用传递，message就是指向this.datas.lists，那为什么this.datas.lists值仍然是空呢？
你使用的是message = res.data,实际上是是将message赋予了res.data对象的引用，即重新分配了内存地址，message自然不再指向this.datas.lists。所以不能改变this.datas.lists的值。
4.数组类型和引用类型
基本类型： string,number,boolean,null,undefined
引用类型： Function,Array,Object
（通常 [ ]来定义的数组是属于Array）可以通过
instanceof 来判断
var arr=[];
console.log(arr instanceof Array); //结果为true
建议还是直接使用 this.datas.lists来操作数据就可以了，简单快捷啊 ，有木有。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。为了账号安全，请及时绑定邮箱和手机
vue+axois跨域请求拿到的session每次都不一样
config里的配置proxyTable: {
target: 'http://192.168.20.29:8081',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}main.js里axios.defaults.withCredentials =Vue.prototype.$http = axios 每次返回的session都不一样，然后就一直提示我没有登陆。要如何配置呢？
楼主解决了吗？我也碰到这个问题了
你还没有登录，请先登录或注册慕课网帐号
楼主解决了吗？我也碰到这个问题了
你还没有登录，请先登录或注册慕课网帐号
2415人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11