2. wx.request請求數據分離 · 微信小程序

[toc] ### 一. export與export default的區別 1. export 可以導出多個 import可以多個，但是要加花括號{} ``` --utils-- var a = 10; function b(){ console.log(20); } class c { d(){ console.log(30); } } export { a, b, c }; //導出變量a, 函數b，原型class c ``` ``` --js-- import {a, b, c} from "../../utils/util"; Page({ onLoad(){ console.log(a); //打印變量a 10 b(); //執行函數b 20 var f = new c; //創建一個原型c的實例f f.d(); //執行f中的d方法 30 } }); ``` 2. export default 可以導出多個導出的是一整個uitls包，需要再次聲明變量獲取utils包中需要的方法和變量 ``` --utils-- export default {a, b, c} ``` ``` --js-- import utils from "../../utils/util"; //直接獲得utils整個包 const a = utils.a; //獲取utils中的a變量 const b = utils.b; //獲取utils中的b方法 const c = utils.c; //獲取utils中的原型c Page({ onLoad(){ console.log(utils); //{a: 10, b: ?, c: ?} console.log(a); //打印a 10 b(); //執行b函數 20 var f = new c; //創建一個原型c的實例 f.d(); //執行實例f的d方法 30 } }); ``` ### 二. Http請求方法與數據分離 >#### 方法1：直接封裝方法 http請求單次或者多次相同的請求的情況下，創建一個http Class，請求時創建實例，傳遞參數 ``` --utils-- /* 創建一個HTTP類 */ class HTTP { /* 創建一個request方法，接受params: url, method, data, success */ request(params){ if(!params.method){ params.method = 'GET'; } /* 在request方法中執行一個wx.request請求 */ wx.request({ url: params.url, //接收params參數 data: params.data, header: { 'Content-Type': 'json' }, success:(res)=>{ /* 當statusCode以2開頭時執行success方法 */ let statusCode = res.statusCode.toString(); if(statusCode.startsWith("2")){ params.success(res.data); }else{ wx.showToast({ title: '網絡錯誤', icon: 'none' }) } }, fail:()=>{ wx.showToast({ title: '網絡錯誤', icon: 'none' }) } }) } } export { HTTP }; ``` ``` --js-- import {HTTP} from "../../utils/util"; Page({ onLoad(){ /* 直接通過HTTP原型發送請求 */ /* 創建一個HTTP實例為exp */ var exp = new HTTP(); /* 使用exp中的request()方法 */ exp.request({ /* 傳遞參數url,success */ url: 'https://douban.uieee.com/v2/movie/top250', /* success方法中傳遞一個回調函數，其中執行handleData方法 */ success: res=>{ this.handleData(res) } }); }, handleData(res){ console.log(res); } }); ``` > #### 方法2：class繼承分離請求當需要發送多次不同的請求時，創建一個model文件夾，存數據 ``` --utils-- 與上一致 ``` model文件夾下的movie.js ``` --model/movie.js-- import {HTTP} from '../utils/util'; /* 創建一個movieModel類繼承HTTP上的方法 */ class movieModel extends HTTP { /* 在movieModel中創建一個getTop250方法, 并傳遞一個callback方法 */ getTop250(callback){ /* 執行HTTP中的request方法,傳遞url, success函數 */ this.request({ url: 'https://douban.uieee.com/v2/movie/top250', success: res=>{ /* 使用接收到的callback方法處理res */ callback(res); } }); } /* 創建一個getComingSoon方法，原理與上相同 */ getComingSoon(callback){ this.request({ url: 'https://douban.uieee.com/v2/movie/coming_soon', success: res=>{ callback(res); } }); } } export { movieModel }; ``` js調用movieModel原型，創建實例獲取數據 ``` --js-- /* 導入movieModel原型 */ import {movieModel} from "../../models/movies"; Page({ onLoad(){ /* 創建一個movieModel的實例：movies */ var movies = new movieModel; /* 執行movies中的getTop250方法 */ movies.getTop250(this.handleData); }, handleData(res){ console.log(res); } }); ``` >#### 方法3：promise 創建一個promise()方法，其中return Promise原型 ``` --utils-- /* 創建一個promise()方法，其中封裝Promise實例 */ function promise(url){ return new Promise((resolve, reject)=>{ /* 執行wx.request方法 */ wx.request({ url: url, header: {'content-type': 'json'}, success: (res)=>{ /* 請求成功時，執行resolve */ resolve(res); }, error(err){ /* 請求失敗時，執行reject */ reject(err); } }); }) } ``` ``` --js-- /* 使用封裝好的promise方法，傳遞url參數 */ promise(coming_soon).then(res=>{ handleData(res) }); ``` >#### 方法4：class配合promise 1. 用Promise的方法封裝http請求 ``` --utils/http.js-- class HTTP { request({url, method="GET", data={}}){ return new Promise((resolve, reject)=>{ wx.request({ url: 'https://douban.uieee.com/v2/movie/' + url, data, header: {'content-type':'json'}, method, success: (res)=>{ const statusCode = res.statusCode.toString(); if(statusCode.startsWith("2")){ resolve(res.data); }else { this._show_error(); } }, fail: (err)=>{ reject(err); this._show_error(); } }); }); } _show_error(){ wx.showToast({ title: '網絡錯誤', icon: 'none' }); } } export { HTTP } ``` 2. 構筑一個新的對象繼承HTTP的request方法，并調用它 ``` --movie.js-- import {HTTP} from "../utils/http"; class MovieModel extends HTTP { getTop250(){ return this.request({ url: 'top250' }); } getInTheaters(){ return this.request({ url: 'in_theaters' }); } getComingSoon(){ return this.request({ url: 'coming_soon' }); } } export { MovieModel } ``` 3. 在index.js中調用 ``` import {MovieModel} from "../../model/movie"; ``` ``` var movieModel = new MovieModel; var top250 = movieModel.getTop250(); var inTheaters = movieModel.getInTheaters(); var comingSoon = movieModel.getComingSoon(); Promise.all([inTheaters, top250, comingSoon]).then(res=>{ // console.log(res); let [inTheaters, top250, comingSoon] = res; console.log(inTheaters); console.log(top250); console.log(comingSoon); }); // movieModel.getTop250().then((res)=>{ // console.log(res); // }); ```