axios的使用

在vue中使用axios需要先下载

npm install axios

在vue项目中使用需要导入

一般在main.js文件中导入

import axios form 'axios

因为axios不是vue的插件，所以不能使用Vue.use()的方式来挂载，把axios放到Vue的原型上，方便将来所有的Vue实例都能使用

Vue.prototype.axios = axio

初始化一些常用的配置项

// 给axios配置默认值
axios.defaults.baseURL ='http://localhost:8888/api/private/v1/';  //这段字符串会在你以后每次发送axios请求的时候默认拼接到url中，这样以后使用axios时，url可以直接写路由地址
axios.defaults.headers.common['Authorization'] = value ; //配置请求头

或使用axios请求拦截器

axios.interceptors.request.use({
	function(config){
	    // 给config配置baseURL
    config.baseURL = 'http://localhost:8888/api/private/v1/'
    // 给config设置headers
    config.headers.Authorization = localStorage.getItem('token')
    return config
    },
    function(error) {
      //当请求出错时
     	console.log(error)
    }
})

发送请求

发送get请求

axios.get('url',{
    params:{}  //发送get请求必须使用params传递数据,或者将数据凭借到url中
}).then(res =>{}) //发送成功后会执行这个回调函数，并可以拿到服务器端返回的数据res

发送post请求

axios.post('url',{
    data:{}
}).then(res =>{}) //发送成功后会执行这个回调函数，并可以拿到服务器端返回的数据res

axiosAPI发送请求

axios({
   methods: 'get/post/put/delete/head/patch',
   url: 'url',
   cache: false,
   params:{id:123}或data: {},
   headers: xxx,
}).then(res =>{}) //发送成功后会执行这个回调函数，并可以拿到服务器端返回的数据res

axios同时发送多个请求

let axiosList=[
   axios.get('url1',{params:xxx,dateType:'JSON'}),
   axios.get('url2',{params:xxx,dateType:'TEXT'}),
]
axios.all(axiosList).then(axios.spread(function(res1,res2){
  console.log(res1,res2)//分别是两个请求的返回值
})