Axios请求数据的使用方法浅析

请求数据的第三方插件Axios,可以支持vue,node ,react

axios:基于Promise的HTTP客户端，用于浏览器和node.js

使用步骤

[code]1：安装axios

npm i axios --save / cnpm

2:

哪里用就在那里引入

import Axios from 'axios' / const axios = require('axios');

3:直接在组件中应用

axios.get('/user')

.then(function (response) {

// handle success

console.log(response);

})

.catch(function (error) {

// handle error

console.log(error);

})

.then(function () {

// always executed

});

代码示例：

请求数据前

[code]<template>
<div id="life">
<h3>生命首期函数</h3>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.catname}}
</li>
</ul>
<br>
<button @click="getData()">请求数据</button>
</div>
</template>

<script>

import Axios from 'axios'
export default {
data(){
return{
list:[]
}
},
methods: {
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalCate'
Axios.get(api)
.then((response)=> {
//尽量用箭头函数，避免this的指向问题
this.list=response.data.result
})
.catch((error)=> {
// handle error
console.log(error);
})

}
},
mounted(){
/* 渲染dom完成时请求数据，操作Dom时常用 */
console.log('实力挂载完成');
this.getData();

}
}

请求数据后：

关于axios请求数据的具体步骤就分析到这，欢迎各路大神指教更好 的套路！！！