Axios基础使用解读

https://github.com/axios/axios

一、基本请求

main.js
import Vue from 'vue';
import App from './components/app.vue';
import Axios from 'axios';
// -> 设置主url地址 
Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';
// -> 给Vue原型挂载一个属性
Vue.prototype.$axios = Axios;
new Vue({
    el: '#app',
    render: c => c(App),
})

app.vue

// 1.一个请求的情况
...
this.$axios.get('getBook',{
    params:{
        id:12
    }
}).then(res=>{
    this.data = res.data.message;
}).catch(err=>{
    console.log(err);
});
...

// 2.多个请求的情况
...
// -> 将多个请求一起发送,一个失败就算失败,成功只有是全体成功
function getMsg(res1,res2){
    ...
}

this.$axios.all([
    this.$axios.post('xxx','zzz'),
    this.$axios.get('xxx?id=xxx')
]).then( // -> 进行分发响应
    this.$axios.spread(getMsg)
).catch(err=>{console.log(err)});
...

二、拦截器的使用

import Vue from 'vue';
import App from './components/app.vue';
import Axios from 'axios';

Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';

//拦截器 -> 对每一次请求都有效
Axios.interceptors.request.use(function(config) {
    //请求发起之前  显示loadding
    return config;
})

Axios.interceptors.response.use(function(config) {
    //在响应回来之后，隐藏loadding
    return config;
})

Vue.prototype.$axios = Axios;

new Vue({
    el: '#app',
    render: c => c(App),
})