uni.request 进行网络请求实例

uni.request
OBJECT常用参数说明（详细参数请戳）

参数名    说明
url    是写api地址的
data    是用来传值的（看下面详情~）
header    是写请求头信息的
method    访问接口的方式（看下面详情~）
succes    访问接口成功之后就会调用success参数为res（看下面详情~）
method 有效值
必须大写，有效值在不同平台差异说明不同。

GET
POST
PUT        不支持支付宝小程序
DELETE     不支持支付宝小程序、头条小程序
CONNECT    不支持支付宝小程序、百度小程序、头条小程序
HEAD       不支持支付宝小程序、头条小程序
OPTIONS    不支持支付宝小程序、头条小程序
TRACE       不支持支付宝小程序、百度小程序、头条小程序

success 返回参数说明

参数    类型    说明
data    Object/String/ArrayBuffer    开发者服务器返回的数据
statusCode    Number    开发者服务器返回的 HTTP 状态码
header    Object    开发者服务器返回的 HTTP Response Header
data 数据说明

对于 GET 方法，会将数据 转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。

对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。
剩下的内容参考 官方文档

现在说一下uni.request请求渲染页面
uni.request 其实就和ajax差不多

1、打开一个空白的组件页面，把下面的复制进去（ 把不需要的删掉就可以 ）

uni.request({
    url: this.$host+'/books/getImage',
    method: 'POST',
    header:{
        'Content-Type' : 'application/json',
        token : uni.getStorageSync("TOKEN")
    },
    data: {
        phone : this.phone
    },
    success: res => {
        console.log(res);
    },
    fail: () => {},
    complete: () => {}
});

2、准备服务器接口数据 http://www.intmote.com/test.json，将代码写在getList()函数里面，并且把函数 写在methods的方法里面

 

methods: {  
   getList() {
        uni.request({
          url: 'http://www.intmote.com/test.json', 
            success: (res) => {
                console.log(res.data);
                this.text = 'request success';
            }
        });
   }
}

3、载入页面的时候加载调用请求函数请求api

onLoad() {
    this.getList();
}

4、成功调用，在控制台打印 console.log(res.data);

5、完整代码
v-for是向页面渲染数组格式的数据的时候用的

<template>
    <view>   
        <view v-for="(item,index) in itemList"  :key="index">
            <view>{{index}} - {{item.name}}</view>
             <view>{{index}} - {{item.nick}}</view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {  
            itemList: []
        }
    },
    onLoad() {
         this.getList();
   },
   methods: {
     getList() {
        uni.request({
            url: 'http://www.intmote.com/test.json', 
            method:'GET',
            data:{},
            success: (res) => {
                console.log(res.data);
                this.itemList =res.data.first;
            }
        });
     }
  }
}
</script>

for循环是接收数组的时候用的

（以前的代码）

methods: {  
    getNews(){
        var _thas = this;
        uni.request({        
            url: 'http://news-at.zhihu.com/api/4/news/latest',
            method: 'GET',
            data: {},
            success: res => {
                 console.log(res.data);
                for(var i=0;i<res.data.stories.length;i++){
                    _thas.news.push(res.data.stories[i])
                }
            },
        });
    },
}