攻克weex - eros數據加載（part2）

PS：最近公司在寫ios app，使用了這個框架搭建，好多好多的坑的說，弄得身心疲憊，到處找資源，找度娘，真的挺心累的，因為公司項目是個測試項目。有頁面編寫和數據加載這方面的內容，就我現在的了解程度，來做個簡單的總結，方便自己以後查閱。

數據加載其實不難，但是，第一次用這個框架寫，還是很多不同，找了很久的資源，終於解決了這個數據加載的問題。

其實官網上面有數據加載的教程，後面就按著官網數據加載結果成功了：

1. 在外網架一個api的接口
2. 必須在同一個網絡（手機和pc段在同一個網段）
3. 數據必須是json格式

按著官網上面走：

$axios（请求）：

注意：App中后端返回的数据格式通常为

json

，所以请确保你们后端 response header 中content-type：值为 application/json，不然可能无法正常解析数据

配置请求参数编辑 config/index.js

ajax: {
        baseUrl: 'http://app.weex-eros.com:52077',
        /**
         * 接口别名
         */
        apis,
        // 接口超时时间
        timeout: 30000,

        /**
         * 请求发送统一拦截器 （可选）
         * options 你请求传入的所有参数和配置
         * next
         */
        requestHandler (options, next) {
            console.log('request-opts', options)
            next()
        },
        /**
         * 请求返回统一拦截器 （可选）
         * options 你请求传入的所有参数和配置
         * resData 服务器端返回的所有数据
         * resolve 请求成功请resolve你得结果，这样请求的.then中的成功回调就能拿到你resolve的数据
         * reject 请求成功请resolve你得结果，这样请求的.then中的失败回调就能拿到你reject的数据
         */
        responseHandler (options, resData, resolve, reject) {
            const { status, errorMsg, data } = resData
            if (status !== 200) {
                console.log(`invoke error status: ${status}`)
                console.log(`invoke error message: ${errorMsg}`)
                reject(resData)
            } else {
                // 自定义请求逻辑
                resolve(data)
            }
        }
    }
...
           

发送请求

$fetch(info)

// 示例
this.$fetch({
    method: 'GET',    // 大写
    name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
    data: {
        count: 1
    }
}).then(resData => {
    // 成功回调
    console.log(resData)
}, error => {
    // 错误回调
    console.log(error)
})
           

Api：

1. method（String）：请求方式，分为

   GET、POST、HEAD、PUT、DELETE、PATCH

   。

   (必须大写)

2. name（String）：请求地址，如果已经在config/apis.js下配置了接口的请求别名，则可以直接调用别名。
3. url（String）: 如果你不想配置别名，可以直接输入相对路径或者绝对路径来请求。
4. data（Object）：请求携带的参数。
5. *params(Object) *: 请求路径的动态参数，如url:api/product/{productId},则params:{productId:...}。
6. header（Object）：当前请求的请求头设置。
7. then（Promise）：

   Promise

   接口返回时候会触发。

hello頁面：

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello，123</text>
        <text class="title">developer</text>
        <wxc-button class="btn-250" text="show eros" @wxcButtonClicked="showEros"></wxc-button>
    </div>
</template>
<script>
    import { WxcButton } from 'weex-ui';
    export default {
        components: { WxcButton },
        methods: {
            // 这里给按钮添加 showEros 事件来跳转
            showEros() {
                this.$router.open({
                    name: 'Eros'
                })
            }
            
        }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
           

eros頁面：

<template>
  <div style="margin-top: 50px;">
    <text class="title">Hi!,{{reData}}</text>
    <text class="title">Enjoy it!</text>
  </div>
</template>
<script>
export default {
    data () {
        return {
            reData:'dddw'
        }    
    },
    created() {
      this.reData="DD",
      this.$fetch({
        method: "GET",
        url: "http://eflow.gis-touch.com:8888/api/kpi/index",
        data: {}
      })
      // .then(res=>res.json())
      .then(res=>{
          this.reData=res;
          // console.log("")
      }
      ,error=>{
        this.reData=error
    })
  }
   created(){
     this.reData = 'Hello',
     this.$fetch(
     {
       url:"http://eflow.gis-touch.com:8888/api/kpi/test",
       method:'GET',
     }
     )
     .then(data=>{this.reData=data.Msg})
     .catch(err=>this.reData = err)
   }
  };
</script>
<style>
.title {
  font-size: 60;
}
</style>
           

結果為：

Hi 小红帽，你已經成功獲取了我的API接口!