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