在 Vue.js 中使用 Axios 使用 Rest API

很多时候，在为 Web 构建应用程序时，您可能希望使用 JavaScript fetch API、Vue 资源、jquery ajax API 在 VueJS 中使用和显示来自 API 的数据，但一种非常流行且最推荐的方法是使用 Axios，一种承诺基于 HTTP 客户端。

Axios 是一个很棒的 HTTP 客户端库。与 JavaScript fetch API 类似，它默认使用 Promises。它也很容易与 VueJS 一起使用。

创建 VueJS 应用程序和安装模块：

• 步骤 1：使用以下命令创建 Vue 应用程序。

  vue create vue-app

• 步骤 2：使用以下命令安装 Axios 模块。

  npm install axios 

• 第 3 步：我们可以使用以下 CDN 链接将 Vue.js 包含到 HTML 中：

  项目目录：它看起来像这样。

项目结构

index.html

  

    
    
    
    
    
    

  

    
        
            
                
                    We're sorry, we're not able to 
                    retrieve this information at the 
                    moment, please try back later
                
            
  
            
                
                    Loading...
                
                
                    {{post.title}}
                
            
        
    
  
    
        new Vue({
            el: '#app-vue',
            data() {
                return {
                    posts: null,
                    loading: false,
                    errored: false
                }
            },
            created() {
  
                // Creating loader
                this.loading = true;
                this.posts = null
  
                axios.get(
        `http://jsonplaceholder.typicode.com/posts`)
                    .then(response => {
  
                        // JSON responses are 
                        // automatically parsed
                        this.posts = response.data
                    })
  
                    // Dealing with errors
                    .catch(error => {
                        console.log(error)
                        this.errored = true
                    })
            }
        });
    

  

样式文件

#app-vue {
    display: flex;
    justify-content: center;
    font-family: 'Karla', sans-serif;
    font-size: 20px;
}
     
.post {
    width: 300px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    padding: 20px;
    background: #FFEEE4;
    margin: 10px;
}

运行应用程序的步骤：如果您已安装 Vue 应用程序，则可以使用此命令运行您的应用程序。

npm run serve 

输出：如果您将其用作 CDN，则复制您的 HTML 路径并将其粘贴到您的浏览器上。

我们的应用程序的输出

结论：除了使用和显示 API 之外，还有很多方法可以使用 Vue 和 axios。您还可以与 Serverless Functions 进行通信，从必须具有写入权限的 API 中发布/编辑/删除，以及许多其他好处。