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是向页面渲染数组格式的数据的时候用的

扫描二维码关注公众号，回复： 9832125 查看本文章

<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])
				}
			},
		});
	},
}