網(wǎng)絡(luò)請求

1. 前言

當(dāng)用戶在瀏覽器的地址欄輸入我們的項(xiàng)目網(wǎng)址，點(diǎn)擊回車后，瀏覽器就會(huì)發(fā)送網(wǎng)絡(luò)請求，經(jīng)過一系列操作后，瀏覽器會(huì)顯示出項(xiàng)目的頁面。那這個(gè)網(wǎng)絡(luò)請求過程中間經(jīng)歷了什么呢？這一小節(jié)我們就來詳細(xì)剖析一下。

本小節(jié)我們將學(xué)習(xí)：網(wǎng)絡(luò)請求的過程是怎樣經(jīng)歷的、uniapp 發(fā)起網(wǎng)絡(luò)請求的應(yīng)用實(shí)例、網(wǎng)絡(luò)請求返回?cái)?shù)據(jù)的處理。

網(wǎng)絡(luò)請求實(shí)例的內(nèi)容最好在實(shí)際項(xiàng)目中去應(yīng)用實(shí)踐，網(wǎng)絡(luò)請求在實(shí)際開發(fā)中很容易出現(xiàn)問題。比如有時(shí)明明請求發(fā)送成功了，卻沒有返回想要的頁面數(shù)據(jù)，這些都需要我們在項(xiàng)目開發(fā)過程中多多練習(xí)積累經(jīng)驗(yàn)。

2. 網(wǎng)絡(luò)請求過程

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

3. uni.request API參數(shù)

uni-app 框架給我們提供了豐富的 API，我們可以直接調(diào)用來進(jìn)行網(wǎng)絡(luò)請求。最常用到的是 uni.request 方法，這一小節(jié)我們來看看 uni.request 的 API 參數(shù)。

大家要注意區(qū)分網(wǎng)絡(luò)請求與路由跳轉(zhuǎn)，網(wǎng)絡(luò)請求是請求項(xiàng)目外部的地址，而路由跳轉(zhuǎn)是跳轉(zhuǎn)到項(xiàng)目內(nèi)部的頁面。

在日常開發(fā)中，我們經(jīng)常用到的是 get 和 post 網(wǎng)絡(luò)請求，在 uni-app 中都是調(diào)用 uni.request API實(shí)現(xiàn)的，下面我們來演示一下。

Tips：

• 上面的列出的參數(shù)只有 url 是必填項(xiàng)，其他都是選填項(xiàng)。
• 在小程序中網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單。

4. 發(fā)送網(wǎng)絡(luò)請求

上面列出的參數(shù)有很多，但是大多數(shù)我們實(shí)際開發(fā)項(xiàng)目用不到，經(jīng)常用到的大多是 url、data、method、success 這幾個(gè)參數(shù)。

4.1 實(shí)例

<template>
    <view>
        <button @click="sendGet">發(fā)送請求</button>
    </view>
</template>

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

4.2 data 參數(shù)說明

data參數(shù)是支持對象 Object、字符串 String 類型的，但不管我們傳入什么類型，最終都會(huì)被轉(zhuǎn)換成 String 類型。轉(zhuǎn)換規(guī)則如下：

get 方法：如果 data 參數(shù)是 { name: 'imooc', age: 18 } ，轉(zhuǎn)換后的結(jié)果是 name=imooc&age=18。

post 方法：如果 header['content-type'] 為 application/json 的數(shù)據(jù)，會(huì)進(jìn)行 JSON 序列化。
如果 header['content-type'] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換為 query string。
實(shí)例：

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

4.3 success 返回參數(shù)說明

上面我們在 success 參數(shù)中打印了返回的數(shù)據(jù)。

success(res) {
  console.log('服務(wù)器返回的信息：',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，說明請求成功了，后面我們再處理從服務(wù)器傳回來的 data 信息就可以了。

5. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了 uni-app 的網(wǎng)絡(luò)請求，直接調(diào)用 uni.request 這個(gè) API 就可以實(shí)現(xiàn)我們經(jīng)常用到的 get、post 請求。本節(jié)課程的重點(diǎn)如下：

• 掌握怎樣發(fā)送 get 請求，經(jīng)常用到的幾個(gè)參數(shù)要熟練；
• data 參數(shù)類型在 get 方法、post 方法請求情況下的不同轉(zhuǎn)換；
• success 返回參數(shù)的格式，以及每個(gè)參數(shù)代表的含義。