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、打开一个空白的组件页面，把下面的复制进去（ 把不需要的删掉就可以 ）

1.  
   uni.request({
2.  
       url: this.$host '/books/getImage',
3.  
       method: 'POST',
4.  
       header:{
5.  
           'Content-Type' : 'application/json',
6.  
           token : uni.getStorageSync("TOKEN")
7.  
       },
8.  
       data: {
9.  
           phone : this.phone
10.  
        },
11.  
        success: res => {
12.  
            console.log(res);
13.  
        },
14.  
        fail: () => {},
15.  
        complete: () => {}
16.  
    });

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

1.  
   methods: {  
2.  
      getList() {
3.  
           uni.request({
4.  
             url: 'http://www.intmote.com/test.json', 
5.  
               success: (res) => {
6.  
                   console.log(res.data);
7.  
                   this.text = 'request success';
8.  
               }
9.  
           });
10.  
       }
11.  
    }

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

1.  
   onLoad() {
2.  
       this.getList();
3.  
   }

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

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

1.  
   <template>
2.  
       <view>   
3.  
           <view v-for="(item,index) in itemList"  :key="index">
4.  
               <view>{{index}} - {{item.name}}</view>
5.  
                <view>{{index}} - {{item.nick}}</view>
6.  
           </view>
7.  
       </view>
8.  
   </template>
9.  
   <script>
10.  
    export default {
11.  
        data() {
12.  
            return {  
13.  
                itemList: []
14.  
            }
15.  
        },
16.  
        onLoad() {
17.  
             this.getList();
18.  
       },
19.  
       methods: {
20.  
         getList() {
21.  
            uni.request({
22.  
                url: 'http://www.intmote.com/test.json', 
23.  
                method:'GET',
24.  
                data:{},
25.  
                success: (res) => {
26.  
                    console.log(res.data);
27.  
                    this.itemList =res.data.first;
28.  
                }
29.  
            });
30.  
         }
31.  
      }
32.  
    }
33.  
    </script>

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

（以前的代码）

1.  
   methods: {  
2.  
       getNews(){
3.  
           var _thas = this;
4.  
           uni.request({        
5.  
               url: 'http://news-at.zhihu.com/api/4/news/latest',
6.  
               method: 'GET',
7.  
               data: {},
8.  
               success: res => {
9.  
                    console.log(res.data);
10.  
                    for(var i=0;i<res.data.stories.length;i ){
11.  
                        _thas.news.push(res.data.stories[i])
12.  
                    }
13.  
                },
14.  
            });
15.  
        },
16.  
    }

本篇文章来至：学新通