基础使用 - axios()

const btn = document.querySelectorAll('button');
//获取
btn[0].onclick=()=>{
axios({
 method:'get',
 url:'http://localhost:3000/posts/1'
}).then(response=>{
 console.log(response);
})
}
// 新增
btn[1].onclick=()=>{
axios({
 method:'POST',
 url:'http://localhost:3000/posts',
 data:{
   title:'这是更新后的数据',
   author:'Dan'
 }
}).then(response=>{
 console.log(response);
})
}
// 修改
btn[2].onclick=()=>{
axios({
 method:'PUT',
 url:'http://localhost:3000/posts/2',
 data:{
   title:'这才是更新后的数据',
   author:'是Dan啊'
 }
}).then(response=>{
 console.log(response);
})
}
// 删除
btn[3].onclick=()=>{
axios({
 method:'DELETE',
 url:'http://localhost:3000/posts/3'
}).then(response=>{
 console.log(response);
})
}

其他方法 - axios.get()/post/request…

const btn = document.querySelectorAll('button');
btn[0].onclick=()=>{
axios.request({
 method:'GET',
 url:'http://localhost:3000/posts'
}).then(response=>{
 console.log(response);
})
}
btn[1].onclick=()=>{
axios.get('http://localhost:3000/posts').then(response=>{
 console.log(response);
})
}
btn[2].onclick=()=>{
axios.post('http://localhost:3000/posts',{
 title:'被我用axios.post修改了'
})
}

传参

```javascript // 方式一 data axios({ method: ‘get’, url: ‘/getBranchData’, data: { brahcnID: 1 } });

// 方式二 /getBranchData?brahcnID=1 //payload - brahcnID: 1 axios({ method: ‘get’, url: ‘/getBranchData’, params: { brahcnID: 1 } });

//方式三 /getBranchData/1 axios({ method: ‘get’, url: /getBranchData/${brahcnID} });

//get方法第二个参数为config axios.get(‘/…’,{ params:{}, data:{} })

//post一般只传data axios.post(‘/…’,data)

//post方法第二个为data,第三个为config // /…?xx=xx&xx=xx axios.post(‘/…’,data,{data:{},params:{}})


<a name="KQVSr"></a>
# 默认配置
```javascript
//默认配置
axios.defaults.method='GET',
axios.defaults.baseURL='http://localhost:3000';
axios.defaults.timeout=3000;
axios({
  url:'/posts'
});

axios实例对象

//当要对多个服务器发送请求时可以使用axios.create创建多个对象
//创建实例对象与axios几乎一样
const dan1 = axios.create({
  // baseURL:'http://localhost:3000',
  baseURL:'http://a.com',
  timeout:3000
});
dan1({url:'/posts'}).then(Response=>{console.log(Response)});

//创建另一个实例对象
const dan2 = axios.create({
  // baseURL:'http://localhost:3000',
  baseURL:'http://b.com',
  timeout:3000
});
dan2.get('/posts').then(Response=>{console.log(Response)});

拦截器

let count = 0 //记录请求次数

//发送请求拦截
axios.interceptors.request.use(function(config){
    //'请求拦截成功'
    count++;
    Vue.showLoading();//显示loading
    config.data={a:99}//修改参数

    return config;
},function(error){
    //'请求拦截失败'
    Vue.hiddenLoading()//隐藏loading
    return Promise.reject(error)
});

//响应数据拦截
axios.interceptors.response.use(function(response){
    //'响应拦截成功'
    count--;
    if (count === 0) {
        Vue.hiddenLoading();//隐藏loading
    }
    return response
},function(error){
    //'响应拦截失败'
    // 对响应错误做点什么
    Vue.hiddenLoading();//隐藏loading
    return Promise.reject(error)
});


axios({
    method:'get',
    url:'http://localhost:3000/posts'
}).then(response=>{
    console.log(response);
},error=>{
    console.log(error);
})

取消请求

let cancel = null;
const btn = document.querySelectorAll('button');
//获取
btn[0].onclick=()=>{
  //如果存在任务则取消上一次,防止用户频繁点击按钮
  if(cancel != null){
    cancel()
  };

  axios({
    method:'get',
    url:'http://localhost:3000/posts/1',
    cancelToken:new axios.CancelToken(function(c){
      cancel=c;
    })
  }).then(response=>{
    cancel = null;//初始化cancel
  })
}

插件-qs

https://github.com/ljharb/qs