Vue.js Ajax(axios)

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Github开源地址: https://github.com/axios/axios

引入方法

这里不介绍,npm安装哟。我们就是转Vue.js

GET 方法

我们可以简单的读取 JSON 数据:

我的 saicheng.js:
这里编写了 axious 的请求示例。
我们 el 绑定了 onstatus这个class。
接受数据,我们定义了格式,请看代码

// ajax请求 url
// 请求得到 赛程的list 
// 后面准备遍历

function get_saicheng_list() {
    var vm = new Vue(
        {
            el: '.onstatus',
            // 收数据
            data () {
              return {
                code: -1,
                cur_time: 0,
                matching: [],
                match_not_start: [],
                match_end: [],
                msg: '',
                teamImgDefault: teamImgDefault,
                imagePath: imagePath,
              }
            },
            mounted () {
                var url = urlapiPrex+"real/matching";
                var params = {type: 0};
                var configs = {timeout: 3000,params:params}
                axios.get(url,configs)
                .then(res => {
                    this.code = res.data.code;
                    this.msg = res.data.msg;
                    this.cur_time = res.data.data.cur_time;
                    this.matching = res.data.data.matching;
                    this.match_not_start = res.data.data.match_not_start;
                    this.match_end = res.data.data.match_end;
                })
                .catch(err => {
                    console.log(err)
                })
            }
        })
}

在这里,我们给绑定到视图。因为我留了一行注释的,死数据给大家。

<ol class="zd mt-1"></ol>
                        <ol class="onstatus" style="margin-top: 20px">

                            <!-- <li id="1824806" leagueid="2074">
                                <span class="check"><i></i></span>
                                <span class="time">16:00</span>
                                <span class="league"><i style="background:#9DA901"></i> 西甲</span>
                                <span class="status">未</span>
                                <span class="game">
                                    <span class="gleft">
                                        <i><img src="//static.gunqiu.com/static/img/team/pcnew/team_31878.png@!20px"
                                                alt="" /></i>
                                        <i class="teamname">阿拉维斯</i>

                                    </span>
                                    <span class="gscore"> <i class="count">-</i> <i>-</i></span>
                                    <span class="gright">
                                        <i><img src="//static.gunqiu.com/static/img/team/pcnew/team_31877.png@!20px"
                                                alt="" /></i>
                                        <i class="teamname">皇家贝蒂斯</i>
                                    </span>

                                </span>
                                <span class="corner"> - </span>
                                <span class="odds">
                                    <i>
                                        <em>1.85</em>
                                        <em>平/半</em>
                                        <em>1.95</em>
                                    </i>
                                    <i class="topline">
                                        <em>1.80</em>
                                        <em>2.5</em>
                                        <em>2.00</em>
                                    </i>
                                </span>
                                <span class="onlive"> </span>
                                <span class="info  blue-color">
                                </span>
                                <span class="recommend  red-color">
                                </span>
                                <span class="option"><a href="//www.gunqiu.com/match_live/1824806">分析</a> </span>
                            </li> -->

                            <li v-for="v in matching" :id="v.match_id" :leagueid="v.competition_id" :matchstate="v.match_state" >
                                <span class="check"><i></i></span>
                                <span class="time">{{v.matchTime}}</span>
                                <span class="league"><i :style="{background:v.competition_color}"></i>{{v.competition_name}}</span>
                                <span class="status red-color" :id="'status-'+v.match_id">{{v.past_time}}</span>
                                <span class="game">
                                    <span class="gleft">
                                        <template v-if="v.homeIcon">
                                            <i><img :src="v.homeIcon"  alt="" /></i>
                                        </template>
                                        <template v-else>
                                            <i><img :src="teamImgDefault"  alt="" /></i>
                                        </template>
                                        <i class="teamname">{{v.home_name}}</i>
                                        <i class="red-pai" style="display: none" :v-show="v.home_red>0">{{v.home_red}}</i>
                                        <i class="yellow-pai" style="display: none" :v-show="v.home_yellow>0">{{v.home_yellow}}</i>
                                    </span>
                                    <span class="gscore">
                                        <i class="countgreen-color">{{v.home_score}}-{{v.away_score}}</i> 
                                        <i>({{v.home_bc_score}}-{{v.away_bc_score}})</i>
                                    </span>
                                </span>
                            </li>

那么展示效果如下:

Vue.js Ajax(axios)

请求network与console如下:

Vue.js Ajax(axios)

Vue.js Ajax(axios)

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~