vueaxios数据请求get、post方法及实例详解

我们常⽤的有get⽅法以及post⽅法，下⾯简单的介绍⼀下这两种请求⽅法vue中使⽤axios⽅法我们先安装axios这个⽅法

npm install --save axios

安装之后采⽤按需引⼊的⽅法，哪个页⾯需要请求数据就在哪个页⾯⾥引⼊⼀下。

import axios from 'axios'

引⼊之后我们就可以进⾏数据请求了，在methods中创建⼀个⽅法

methods：{ getInfo（）{ let url = \"url\"

axios.get(url).then((res)=>{ console.log(res) }) } }

然后我们在mounted这个⽣命周期中进⾏调⽤

mounted（）{ this.getInfo() }

这样就可以在控制台中查看数据，以上是⼀个简单的get⽅法数据请求，下⾯继续介绍⼀下post⽅法的使⽤，其实post和get的使⽤没有什么区别只是再加上⼀个参数就可以了，看⼀下我们的代码

methods：{ postInfo（）{ let url = \"url\"

let params=new URLSearchParams();//这个⽅法在axios的官⽹中有介绍，除了这个⽅法还有qs这个⽅法 params.append(\"key\ params.append(\"key\

axios.post(url,params).then((res)=>{ console.log(res) }) } }

同样在mounted这个⽣命周期中进⾏调⽤

mounted（）{ this.postInfo() }

补充：下⾯看下axios 数据请求

axios是⼀个基于Promise,同时⽀持浏览器端和Node.js的HTTP库，常⽤于Ajax请求。

Vue.js 不像jQuery 或 AngularJS，本⾝并没有带Ajax⽅法，因此需要借助插件或第三⽅HTTP库。GET和POST请求

axios.get(\"./package.json\ params:{ userId:\"999\" },

headers:{ token:\"jack\" }

}).then(res=>{

this.msg = res.data; }).catch(function (error) {

console.log(\"error init.\"+error) });

POST：

axios.post(\"./package.json\ userId:\"888\" },{

headers:{ token:\"tom\" }

}).then(res=>{

this.msg =res.data }).catch(err=>{ console.log(err) })

基于Promise 可以执⾏多个并发请求:1

function getUserAccount(){ return axios.get('/user/123') }

function getUserPermissions(){

return axios.get('/user/12345/premissions') }

axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(acct,perms){ //请求都完时 }))

也可通过写⼊配置的形式发起请求：

axios({

method:'post', url:'/user/123', data:{

firstName:'Fred',

lastName:'Flintstone' }

}).then(function(res){ console.log(res) })

在业务中经常将其封装为实例形式调⽤，便于通⽤配置：

// util.js

const instance = axios.create({

baseURL:\"http://jsonplaceholder.typicode.com/\ timeout:1000,

headers:{\"Content-Type\":\"application/x-www-form-urlencoded\})

export default instance;

在mounted中调⽤：

Ajax({

method:'post',

url:'/package.json', data:{

firstName:'Fred', lastName:'flintone' }

}).then(res=>{

console.log(res.data) this.msg = res.data })

强求拦截可⽤于loading..

axios.interceptors.request.use(config=>{ console.log(\"require init\"); return config })

axios.interceptors.response.use(response=>{ console.log(\"response init\"); return response })

总结

以上所述是⼩编给⼤家介绍的vue axios数据请求get、post⽅法及实例详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给

我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！