npm安装:npm install axios vue-axios --save
main.js引入axios和vue-axios
import axios from “axios”
import Vueaxios from “vue-axios”
Vue.use(Vueaxios,axios)
注释:axios是一个库,不是vue的第三方插件,不能通过Vue.use()方法安装插件,需要在原型进行绑定Vue.prototype.$http = axios;vue-axios是vue的三方插件,通过全局方法Vue.use()使用插件;
axios的方法get、post、put、patch、delete
get,delete的两个参数url,config
axios原型添加axios:
axios.get().then();
axios和vue-axios一起使用:
this.axios.get().then()
axios.get('/data.json',{
params:{
id: 1
}
}).then(res=>{
console.log(res)
})
//http://localhost:8080/data.json?id=1
或
axios({
method: 'get',
url:'/data.json'
params:{
id:1
}
})
//post 两种上传方式applicition/json和form-data
let data = {
id:1
}
axios.post('/data.json',data).then(res=>{
console.log(res)
})
或者
axios({
method:'post',
url:'/data.json',
data:data
}).then(res=>{
console.log(res)
})
//post form-data
let formData = new FormData()
for(let key in data){
formData.append(key,data[key])
}
axios.post('post',formData).then(res=>{
console.log(res)
})
//put
axios.put('put',data).then(res=>{
console.log(res)
})
//patch
axios.patch('patch',data).then(res=>{
console.log(res)
})
//delete
axios.delete('delete',{
params:{
id:1
}
}).then(res=>{
console.log(res)
})
或者
axios.delete('delete',{
data:{
id:1
}
}).then(res=>{
console.log(res)
})
并发请求:同时处理多个接口并同一处理数据
axios.all([
axios.get('./data1.json')
axios.get("./data2.json")
]).then(
axios.spread((data1res,data2res)=>{
console.log(data1res,data2res)
})
)