axios.get|post|put|delete(url,options)
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">
var App = {
template: `
<div>
<button @click="sendAjax">發(fā)ajax</button>
</div>
`,
methods: {
sendAjax: function () {
//讓組件具備axios對象的引用
// axios.get|post|put|delete(url,options)
axios.get('/http://127.0.0.1/upload')
.then(function (res) {
console.log(res)
})
.catch(function (err) {
console.log(err)
})
}
}
}
//組件內(nèi)的每個this對象都是Vue的孩子
//Vue祖宗的原型數(shù)據(jù)雾叭，都會共享給孩子
Vue.prototype.$axios = axios;
new Vue({
el: '#app',
components: {
app: App,
},
template: '<app/>',
});
</script>
</body>
合并請求
代碼示例：
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">
var App = {
template: `
<div>
響應(yīng)1： {{ res1 }}
響應(yīng)2： {{ res2 }}
<button @click="sendAjax">發(fā)ajax</button>
</div>
`,
data:function(){
return {
res1:'',
res2:'',
}
},
methods: {
sendAjax: function () {
//配置公共對象
this.$axios.defaults.baseURL='http://127.0.0.1/';
//請求1 get / 請求2 post /add
//this.$axios.get | post (url,[post的時候有data],options)
var q1 = this.$axios.get('')
var q2 = this.$axios.post('add','a=1')
//合并這兩個請求
this.$axios.all([q1,q2])
.then(this.$axios.spread((res1,res2)=>{
//全部成功
this.res1=res1.data;
this.res2=res2.data;
}))
.catch(err=>{
//其一失敗
console.log(err)
})
}
}
}
//組件內(nèi)的每個this對象都是Vue的孩子
//Vue祖宗的原型數(shù)據(jù)谍婉，都會共享給孩子
Vue.prototype.$axios = axios;
new Vue({
el: '#app',
components: {
app: App,
},
template: '<app/>',
});
</script>
</body>
代碼中 合并請求的
then用到了箭頭函數(shù)所以this的指向是對象本身挫掏，如果用function(){this..}則this指向的是window對象
攔截器
- 單請求配置options:
axios.post(url,data,options) - 全局配置defaults:
this.$axios.defaults - config:
請求攔截器中的參數(shù) - response.config
響應(yīng)攔截器中的參數(shù) - options
-
baseURL基礎(chǔ)URL路徑 -
params查詢字符串（對象） -
transformRequest:是個function(post請求傳遞的數(shù)據(jù)){ }轉(zhuǎn)換請求數(shù)據(jù) -
transformResponse:是個function(res){自己轉(zhuǎn)換相應(yīng)回來的數(shù)據(jù)}轉(zhuǎn)換響應(yīng)體數(shù)據(jù) -
headers請求信息 -
data請求體數(shù)據(jù) -
timeout請求超時章钾，請求多久后沒有響應(yīng)算是超時（毫秒）
-
代碼示例：
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.1.8.min.js"></script>
<script type="text/javascript">
var App = {
template: `
<div>
響應(yīng)1： {{ res1 }}
響應(yīng)2： {{ res2 }}
<button @click="sendAjax">發(fā)ajax</button>
</div>
`,
data:function(){
return {
res1:'',
res2:'',
}
},
methods: {
sendAjax: function () {
//配置公共對象
this.$axios.defaults.baseURL='http://127.0.0.1/';
//會覆蓋原來默認的頭
// this.$axios.defaults.headers = {};
//走默認的請求頭臭笆，修改個別
this.$axios.defaults.headers.accept = 'abc';
//請求1
this.$axios.get('',{
params:{id:1},
//修改響應(yīng)體數(shù)據(jù)
transformResponse: function (data) {
data = '改了數(shù)據(jù)了';
return data;
},
})
.then(res=>{
console.log(res.data);
})
.catch(err=>{
console.log(err.data);
});
//請求2
this.$axios.post('add','name=jack',{
timeout:1000,
//修改請求體數(shù)據(jù)
transformRequest: function (data) {
return 'name= rose';
}
})
}
}
}
//組件內(nèi)的每個this對象都是Vue的孩子
//Vue祖宗的原型數(shù)據(jù)材诽，都會共享給孩子
Vue.prototype.$axios = axios;
new Vue({
el: '#app',
components: {
app: App,
},
template: '<app/>',
});
</script>
</body>
