網絡請求

1. 前言

當用戶在瀏覽器的地址欄輸入我們的項目網址，點擊回車后，瀏覽器就會發送網絡請求，經過一系列操作后，瀏覽器會顯示出項目的頁面。那這個網絡請求過程中間經歷了什么呢？這一小節我們就來詳細剖析一下。

本小節我們將學習：網絡請求的過程是怎樣經歷的、uniapp 發起網絡請求的應用實例、網絡請求返回數據的處理。

網絡請求實例的內容最好在實際項目中去應用實踐，網絡請求在實際開發中很容易出現問題。比如有時明明請求發送成功了，卻沒有返回想要的頁面數據，這些都需要我們在項目開發過程中多多練習積累經驗。

2. 網絡請求過程

在我們從發送網絡情況到顯示網頁的這個過程中，系統主要進行了下面幾步操作：
（1）進行域名解析：系統會根據域名找到服務器的IP地址；
（2）建立TCP連接：確保數據可以有效的傳輸；
（3）客戶端發起 HTTP 請求：TCP建立連接后，客戶端才會正式發起 HTTP 請求，帶著請求數據發給服務器；
（4）服務器響應HTTP請求：服務器會接收并處理上一步從客戶端發過來的數據，不管是否處理成功，都會返回一個響應消息給客戶端，包括 HTML 文件或者其他格式的數據，還有響應狀態碼等，響應狀態碼是判斷我們是否請求成功最直觀的數據，我們最常見的有200 OK請求成功、404 Not Found 請求失敗。
（5）瀏覽器解析 HTML 文件：瀏覽器拿到html文件后，就會開始解析并渲染其中的html代碼，將相應的頁面顯示給用戶。

3. uni.request API參數

uni-app 框架給我們提供了豐富的 API，我們可以直接調用來進行網絡請求。最常用到的是 uni.request 方法，這一小節我們來看看 uni.request 的 API 參數。

大家要注意區分網絡請求與路由跳轉，網絡請求是請求項目外部的地址，而路由跳轉是跳轉到項目內部的頁面。

在日常開發中，我們經常用到的是 get 和 post 網絡請求，在 uni-app 中都是調用 uni.request API實現的，下面我們來演示一下。

Tips：

• 上面的列出的參數只有 url 是必填項，其他都是選填項。
• 在小程序中網絡相關的 API 在使用前需要配置域名白名單。

4. 發送網絡請求

上面列出的參數有很多，但是大多數我們實際開發項目用不到，經常用到的大多是 url、data、method、success 這幾個參數。

4.1 實例

<template>
    <view>
        <button @click="sendGet">發送請求</button>
    </view>
</template>

<script>
	export default {
	    methods: {
	        sendGet () {
	            uni.request({
					//示例地址，非真實地址
	                url: 'http://localhost:8080/api/getData',
					//必須為大寫，默認值為GET，GET請求可以不寫此參數
					method:'GET',
					data:{
					   openId:"4a96efrtgyt56Q89jiyth"
					},
	                success(res) {
	                  console.log(res)
	                }
	            })
	        }
	    }
	}
</script>

4.2 data 參數說明

data參數是支持對象 Object、字符串 String 類型的，但不管我們傳入什么類型，最終都會被轉換成 String 類型。轉換規則如下：

get 方法：如果 data 參數是 { name: 'imooc', age: 18 } ，轉換后的結果是 name=imooc&age=18。

post 方法：如果 header['content-type'] 為 application/json 的數據，會進行 JSON 序列化。
如果 header['content-type'] 為 application/x-www-form-urlencoded 的數據，會將數據轉換為 query string。
實例：

uni.request({
	url: '請求地址',
	header: {
		//data 會 JSON 序列化
	    'Content-Type': 'application/json;charset=UTF-8',
		//data 會被轉為 query string
	    'Content-Type': 'application/x-www-form-urlencoded',
	},
	data:{
	   openId:"4a96efrtgyt56Q89jiyth"
	},
    success(res) {
      console.log('服務器返回的信息：',res)
    }
})

4.3 success 返回參數說明

上面我們在 success 參數中打印了返回的數據。

success(res) {
  console.log('服務器返回的信息：',res)
}

打印信息格式如下：

{
  "data":"{"id":1,"name": "imooc"}",
  "header": {
    "Server": "nginx/1.14.0",
    "Date": "Thu, 10 Apr 2020 03:08:20 GMT",
    "Content-Type": "application/json;charset=utf-8;",
    "Transfer-Encoding": "chunked",
    "Connection": "keep-alive"
  },
  "statusCode": 200,
  "cookies": [],
  "errMsg": "request:ok"
}

statusCode 為 200，說明請求成功了，后面我們再處理從服務器傳回來的 data 信息就可以了。

5. 小結

本節課程我們主要學習了 uni-app 的網絡請求，直接調用 uni.request 這個 API 就可以實現我們經常用到的 get、post 請求。本節課程的重點如下：

• 掌握怎樣發送 get 請求，經常用到的幾個參數要熟練；
• data 參數類型在 get 方法、post 方法請求情況下的不同轉換；
• success 返回參數的格式，以及每個參數代表的含義。