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

最新推荐文章于 2025-06-08 21:36:38 发布

原创最新推荐文章于 2025-06-08 21:36:38 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#axios

Vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用Axios进行数据请求，包括安装、导入和具体使用步骤，通过实例展示了如何在组件中调用Axios获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

使用步骤

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

});

代码示例：

请求数据前

<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();
        
    }
}

请求数据后：