[JavaScript知识库]VUE axios使用方法

axios的安装

$ npm i axios -S
$ npm i vue-axios -S

//main.js

//全局注册 axios
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;//this.$axios使用

//或 vue-axios
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios，axios);//Vue.axios/this.axios/this.$http使用axios，一次封装方便协作规范

//template.vue
//模板中局部引入
import axios from 'axios';//this.axios使用

axios的使用
1、GET请求、POST请求
axios.get(url[,params]).then(function(response){…}).catch(function(error){…});
axios.post(url,data).then(function(response){…}).catch(function(error){…})
2、多个并发请求
并发的助手函数axios.all(iterable);axios.spread(callback)

function get1(){};
function get2(){};
function get3(){};
axios.all([get1(),get2(),get3()]).then(axios.spread(function(data1,data2,data3){
?? ?......
}))

3、API
传递相关配置参数创建请求：

1)、axios(config)发送POST请求：

axios({
?? ??? ?method:'post',
?? ??? ?url:'url',
?? ??? ?data:{datas}
?? ?})


2)、axios(url[,config])发送GET请求：

axios('/url?id=123456')
?? ?//或
?? ?axios('/url',
?? ?params:{
?? ??? ?id:123456
?? ?}

?
4、创建实例

axios.creat([config])

5、响应的结构

//then(response=>{...})得到的数据结构
response：｛
?? ?data:{},
?? ?status:200,
?? ?statusText:"OK",
?? ?headers:{},
?? ?config:{},
?? ?｝
//catch(error=>{...})得到的数据结构
error:{
?? ?response:{
?? ??? ?data:{},
?? ??? ?status:'',
?? ??? ?headers:{},
?? ??? ?},
?? ?message:'',
?? ?config:{},
?? ?}

6、配置默认值
?

1)、全局的axios默认值

axios.defaults.baseURL = '';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN ;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' ;?
1
2
3
2)、自定义实例的axios配置

例如创建实例时var api = axios.create({baseURL:‘URL’})；创建后修改api.defaults.headers.conmon[‘Authorization’]=AUTH_TOKEN;

3)、配置合并优先顺序

库的默认lib/defaults.js => 实例创建时axios.create() => 请求发送时的config参数