Vue+axios+php使用v-for遍历显示数据

分手后的思念是犯贱 2023-10-06 20:28 17阅读 0赞

#### 阅读目录 ####

*  default.html
 *  index.php
 *  Promise对象中\[\[PromiseResult\]\]的取值

## default.html ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script type="text/javascript">
    const app=Vue.createApp({
           
        data(){
          
            return{
          
                list: []
            }
        },
        mounted() {
          
            // this.list = ['1-小红','2-小影','3-小丽'];
            const ax = axios.get('http://tt.cc', {
          
                        params: {
          
                          ID: 12345
                        }
                      })
                      .then(function (response) {
          
                        return response;
                      })
                      .catch(function (error) {
          
                        console.log(error);
                      })
    
            ax.then(res=>{
          
                // console.log(res.data);
                this.list = res.data;
            });
        },
        template: `
                <ul>
                    <li v-for="item of list">{
           {item}}</li>
                </ul>`
        });
    
    const vm=app.mount("#app")
    </script>
    </html>

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

## index.php ##

<?php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");
    header('Access-Control-Allow-Methods: POST,GET');
    
    // yield方式
    // 耗时0.2580891秒
    // 内存: 339K
    $res = [
        'name'=>'willem',
        'age'=>31,
        'sex'=>'man',
        'user_id'=>$_GET['ID']
    ];
    
    echo json_back($res);
    
    function json_back($data, $is_exit = true)
    {
        
        $callback = $_GET['callback'] ?? '';
        if ($callback) {
        
            echo '' . $callback ."(". json_encode($data, JSON_UNESCAPED_UNICODE).")";
        } else {
        
            echo json_encode($data, JSON_UNESCAPED_UNICODE);
        }
        if ($is_exit) exit();
    }

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

## Promise对象中\[\[PromiseResult\]\]的取值 ##

我在`axios中return`参数的时候在另一个JS中接收到了一个promise对象，为了获取其中的`[[PromiseResult]]`的内容，可使用`then()`函数。

示例如下：

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/36cc7689c8ca401083e4cafbb6c2d312.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0d758f10f8664758bdd848d54d58a059.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_12,color_FFFFFF,t_70,g_se,x_16