Vue 请求数据（axios）

电玩女神 2022-03-24 14:54 354阅读 0赞

Vue axios请求数据与vue-resource请求数据有所不同

步骤如下：

###### 1.安装 npm install axios --save / npm install --save axios ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]

###### 2、哪里用哪里引入axios (与vue-resource有所不同,vue\_resource在main.js 中引入便可以全局使用) ######

<template>
        
        <div id="home">首页组件
            <button @click="getData()">请求数据</button>
            <hr>
            <br>
            <ul>
                <li v-for="item in list">
                                            
                    {
       {item.title}}
                </li>
            </ul>
        </div>
    
    </template>
    
    <script> /* 请求数据的模板 axios的使用 1、安装 cnpm install axios --save 2、哪里用哪里引入axios (与vue-resource有所不同) */ import Axios from 'axios'; export default{ data(){ return { msg:'我是一个首页组件msg', list:[] } }, methods:{ getData(){ //请求数据 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';//定义好的一个数据 //如下为语法格式，可详见官方文档 Axios.get(api).then((response)=>{ console.log(response); //观察控制台它的数据是在哪个部分 this.list=response.data.result; //用list接收这个数据 }).catch((error)=>{ //接收错误 console.log(error); }) } }, mounted(){ /*生命周期函数*/ this.getData(); // 当页面刷新时自动加载数据 } } </script>
    
    <style> </style>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
以上就是axios请求数据，若有任何疑问或是不解，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220323/403fc374dc124fd4b9afb1b37b0bae74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220323/80d6710e86d941aaa175aa59d8f96efd.png