>[success] # 網路請求 1. 微信提供了專屬的API接口,用于網絡請求: `wx.request` 2. 常用的屬性 `success`成功時的回調 / `fail` 失敗時的回調  3. 每個微信小程序需要事先設置通訊域名，小程序只可以跟指定的域名進行網絡通信，配置位置**小程序登錄后臺 – 開發管理 – 開發設置 – 服務器域名** 4. 服務器域名請在 「小程序后臺 - 開發 - 開發設置 - 服務器域名」 中進行配置，配置時需要注意 * 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議 * 域名不能使用 IP 地址（小程序的局域網 IP 除外）或 localhost * 可以配置端口，如` https://myserver.com:8080`，但是配置后只能向`https://myserver.com:8080` 發起請求。如果向`https://myserver.com、https://myserver.com:9091` 等 URL 請求則會失敗。 * 如果不配置端口。如` https://myserver.com`，那么請求的 `URL` 中也不能包含端口，甚至是默認的 `443 `端口也不可以。如果向` https://myserver.com:443` 請求則會失敗 * 域名必須經過 ICP 備案 * 出于安全考慮，`api.weixin.qq.com `不能被配置為服務器域名，相關 API 也不能在小程序內調用。 開發者應將 `AppSecret`保存到后臺服務器中，通過服務器使用 `getAccessToken` 接口獲取 access\_token，并調用相關 `API` * 不支持配置父域名，使用子域名 5. 在開發環境想跳過上述的要求可以在，圖中位置勾選  >[danger] ##### 測試json ~~~ json {"errcode":0,"errmsg":null,"data":[{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":290,"priceTipBadge":{"type":0,"text":"已減￥65","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":44173741,"houseName":"【踏春出游季?綠野仙蹤】情侶靜謐情調小窩?智能大屏投影?沙面公園?夜游珠江?朝拜圣心大教堂","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200728/thumb/202007281552537926_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":225,"location":"廣州·荔灣區"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":218,"priceTipBadge":{"type":0,"text":"已減￥63","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51953704,"houseName":"米朵國際公寓(廣州沙涌地鐵站店)雅致大床房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/cunit/day_210909/thumb/202109091308301691_700_467.jpg","width":700,"height":467},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.7分","showHouseVideo":false,"cityId":45,"finalPrice":155,"location":"廣州·荔灣區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1403,"priceTipBadge":{"type":0,"text":"已減￥219","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":18298295,"houseName":"進出方便【日式風雅頌】琶洲派對復式6床|廣交會國際展館2km|求婚生日會商務|麻將火鍋投影足球機","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_191218/thumb/201912181440563294_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·5居6床 12人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":1184,"location":"廣州·海珠區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":273,"priceTipBadge":{"type":0,"text":"已減￥48","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":20061007,"houseName":"雅致中國風大床房/南站免費接送/近長隆/可開票","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200105/thumb/202001051429207308_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":225,"location":"廣州·番禺區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":196,"priceTipBadge":{"type":0,"text":"已減￥37","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":12731258,"houseName":"{徒者-短租便宜} 上下九步行街 | 北京路商圈 | 珠江夜游永慶坊 | 地鐵口清新投影會員房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190612/thumb/201906121047444344_360_480.jpg","width":360,"height":480},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.7分","showHouseVideo":true,"cityId":45,"finalPrice":159,"location":"廣州·荔灣區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1005,"priceTipBadge":{"type":0,"text":"已減￥317","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":13196128,"houseName":"【貳號公館】獨棟三層5房/自動麻將投影桌游/上下九荔灣廣場旁/永慶坊沙面十三行/西關地道美食","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190615/thumb/201906151731475951_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·5居5床 10人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":688,"location":"廣州·荔灣區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":415,"priceTipBadge":{"type":0,"text":"已減￥97","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":8465745,"houseName":"西關里珠璣—具有西關原汁原味特色民宿","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190723/thumb/201907230818439048_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 5.0分","showHouseVideo":true,"cityId":45,"finalPrice":318,"location":"廣州·荔灣區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":207,"priceTipBadge":{"type":0,"text":"已減￥38","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":49139347,"houseName":"近商圈近醫院溫馨私享Loft復式大窗房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/qualifiedpics/day_210822/thumb/202108222250217737_360_480.jpg","width":360,"height":480},"commentScore":"4.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.0分","showHouseVideo":true,"cityId":45,"finalPrice":169,"location":"廣州·天河區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":143,"priceTipBadge":{"type":0,"text":"已減￥26","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51830434,"houseName":"豪華落地Loft復式大床房（近地鐵，近白云匯廣場，國際會議中心)","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210901/thumb/202109011942432508_360_480.jpg","width":360,"height":480},"commentScore":"4.6","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.6分","showHouseVideo":false,"cityId":45,"finalPrice":117,"location":"廣州·白云區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":598,"priceTipBadge":{"type":0,"text":"已減￥158","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":40157566,"houseName":"Loft復式溫馨三房臨近沙面上下九永慶坊旅游區&北京路步行街地鐵便捷到達","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210517/thumb/202105171125117829_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·3居3床 6人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":440,"location":"廣州·荔灣區"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":273,"priceTipBadge":{"type":0,"text":"已減￥65","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":5772636,"houseName":"LOFT雙床房55寸大電視適合十三行進貨北京路上下九游玩近孫逸仙紀念醫院廣州醫科大附屬一院（非江景）","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_180902/thumb/201809021105384480_700_467.jpg","width":700,"height":467},"commentScore":"4.4","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居2床 4人 4.4分","showHouseVideo":true,"cityId":45,"finalPrice":208,"location":"廣州·越秀區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":1352,"priceTipBadge":{"type":0,"text":"已減￥258","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":52040560,"houseName":"進出方便【炫彩烏托邦】琶洲聚會party200平復式|可住12人|麻將游戲機投影|廣交會展館2km|","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210902/thumb/202109022133235468_360_480.jpg","width":360,"height":480},"commentScore":"5.0","extendMap":{"logicBit":"2048"},"summaryText":"整套·4居6床 12人 5.0分","showHouseVideo":false,"cityId":45,"finalPrice":1094,"location":"廣州·海珠區"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":208,"priceTipBadge":{"type":0,"text":"已減￥48","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":47680507,"houseName":"智簡民宿A/中大/廣外/gogo新天地/AI加持/自助手工咖啡/大屏電視","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210814/thumb/202108141259229162_700_467.jpg","width":700,"height":467},"commentScore":"4.5","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.5分","showHouseVideo":true,"cityId":45,"finalPrice":160,"location":"廣州·番禺區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":407,"priceTipBadge":{"type":0,"text":"已減￥78","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":45332023,"houseName":"【唯梵?風之谷】沙面|上下九|西關復式兩居","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_201001/thumb/202010011530588874_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 4人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":329,"location":"廣州·荔灣區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":364,"priceTipBadge":{"type":0,"text":"已減￥64","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":13283950,"houseName":"廣州塔/近地鐵/廣交會/珠江夜游/浴缸","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_190626/thumb/201906261634059454_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":300,"location":"廣州·海珠區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":324,"priceTipBadge":{"type":0,"text":"已減￥105","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":40404708,"houseName":"地鐵6號沙貝站/近北京路萬達/江景公寓","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_200620/thumb/202006201637368526_360_480.jpg","width":360,"height":480},"commentScore":"4.5","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 3人 4.5分","showHouseVideo":true,"cityId":45,"finalPrice":219,"location":"廣州·白云區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":474,"priceTipBadge":{"type":0,"text":"已減￥87","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":15653268,"houseName":"〖翡冷翠〗加勒比莊園LOFT/行李寄存/全身鏡/寬屏投影/5分鐘到珠江新城地鐵站/步行K11、花城匯","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_191128/thumb/201911281857137020_360_480.jpg","width":360,"height":480},"commentScore":"4.9","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.9分","showHouseVideo":false,"cityId":45,"finalPrice":387,"location":"廣州·天河區"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":490,"priceTipBadge":{"type":0,"text":"已減￥46","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":49870042,"houseName":"〖意途·陸〗帶廚房可做飯 簡約現代風 兩居室 大床房 珠江新城 直達長隆可寄存行李","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210508/thumb/202105081855312851_700_467.jpg","width":700,"height":467},"commentScore":"4.7","extendMap":{"logicBit":"2048"},"summaryText":"整套·2居2床 4人 4.7分","showHouseVideo":true,"cityId":45,"finalPrice":444,"location":"廣州·天河區"}},{"discoveryContentType":9,"data":{"iconTag":null,"productPrice":355,"priceTipBadge":{"type":0,"text":"已減￥64","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":51858142,"houseName":"廣州塔江景房 ｜巨幕投影| 夕陽燈｜海心沙｜海心橋｜琶洲廣交會、珠江新城。","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/landlordunit/day_210819/thumb/202108192131269043_360_480.jpg","width":360,"height":480},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":291,"location":"廣州·海珠區"}},{"discoveryContentType":3,"data":{"iconTag":null,"productPrice":227,"priceTipBadge":{"type":0,"text":"已減￥40","color":"#FFFFFF","background":null,"border":null,"orderIndex":0,"tip":null,"jumpUrl":null,"colorType":0,"gradient":{"startColor":"#FF6666","endColor":"FF9F9F"}},"houseAdvert":null,"activityInfo":null,"sellingPoint":null,"guideText":null,"referencePriceDesc":null,"poiLocation":null,"houseId":52096417,"houseName":"悅趣服務式公寓輕奢大床房","houseTags":null,"image":{"url":"https://pic.tujia.com/upload/cunit/day_210907/thumb/202109071455223002_700_467.jpg","width":700,"height":467},"commentScore":"4.8","extendMap":{"logicBit":"2048"},"summaryText":"整套·1居1床 2人 4.8分","showHouseVideo":false,"cityId":45,"finalPrice":187,"location":"廣州·黃埔區"}}]} ~~~ >[info] ## 使用案例  1. 案例使用的是codewhy 老師的數據接口，如果后續不可用，可以使用上面json 結構 * wxml ~~~html <view>{{page}}</view> <view class="house-list"> <block wx:for="{{houselist}}" wx:key="index"> <view class="item"> <image src="{{ item.data.image.url}}"></image> <text>{{item.data.houseName}}</text> </view> </block> </view> ~~~ * js ~~~ // pages/network/index.js Page({ /** * 頁面的初始數據 */ data: { houselist: [], page:1, }, /** * 生命周期函數--監聽頁面加載 */ onLoad(options) { const data = {page:this.data.page} this.setHouselist(data) }, // 滾動觸底請求數據 onReachBottom(){ console.log('觸底') const page = this.data.page + 1 this.setData({page}) this.setHouselist({page}) }, // 請求接口 setHouselist(data) { wx.request({ url: 'http://codercba.com:1888/api/home/houselist', data, success: (res) => { const data = res.data.data // 數據拼接會原來數組 const houselist = [...this.data.houselist,...data] this.setData({ houselist }) } }) }, }) ~~~ * wxss ~~~ .house-list{ display: flex; flex-flow:row wrap } .item{ width: 50%; } ~~~ >[info] ## 將wx.request 進行封裝 1. 為了全局方便管理 wx.request 可以對其進行一次二次封裝 2. 下面案例是創建一個 serves 文件進行聲明封裝函數  >[danger] ##### 函數形式封裝 ~~~ // 封裝成函數 export function request(options) { return new Promise((resolve, reject) => { wx.request({ ...options, success: (res) => { resolve(res.data) }, fail: reject }) }) } ~~~ * 使用 ~~~ import {request} from '../../serves/index' // pages/network/index.js Page({ /** * 頁面的初始數據 */ data: { houselist: [], page:1, }, /** * 生命周期函數--監聽頁面加載 */ onLoad(options) { const data = {page:this.data.page} this.setHouselist(data) }, // 滾動觸底請求數據 onReachBottom(){ console.log('觸底') const page = this.data.page + 1 this.setData({page}) this.setHouselist({page}) }, // 請求接口 async setHouselist(data) { const res = await request({ url: 'http://codercba.com:1888/api/home/houselist', data }) const d = res.data // 數據拼接會原來數組 const houselist = [...this.data.houselist,...d] this.setData({ houselist }) }, }) ~~~ >[danger] ##### 封裝class 形式 ~~~ // 封裝成類 -> 實例 class Request { constructor(baseURL) { this.baseURL = baseURL } request(options) { const { url } = options return new Promise((resolve, reject) => { wx.request({ ...options, url: this.baseURL + url, success: (res) => { resolve(res.data) }, fail: (err) => { console.log("err:", err); } }) }) } get(options) { return this.request({ ...options, method: "get" }) } post(options) { return this.request({ ...options, method: "post" }) } } export const hyReqInstance = new Request("http://codercba.com:1888/api") export const hyLoginReqInstance = new Request("http://123.207.32.32:3000") ~~~