uni-app封裝網絡請求promise

在項目的根目錄下，創建http文件夾。
然后在創建request.js文件
文件代碼如下

export  function apiapi(myurl,myget,mydata,tou="Accept: text/plain" ){
	return new Promise((resolve,reject)=>{
		uni.request({
			url: myurl, //真實接口地址。
			
			method:myget||"get",//請求的方式
			
			data:mydata||{},//參數
			
			header: {
				'custom-header': tou//自定義請求頭信息，這里也可以攜帶token 
			},
				
			// 成功使用resolve
			success: (res) => {
				resolve(res)
			},
			
			//失敗調用reject
			fail:(err)=>{
				reject(err)
			}
		});
	})
}

我是使用的promise進行封裝的。
對promise封裝的注意點
要有返回值  return
resolve,是成功時直接調用。將要傳遞的參數放入進去resolve(res)
reject失敗錯誤直接調用。將要傳遞的參數直接放進去reject(err)

注意
在一個模塊中，可以同時使用export default 和export 向外暴露成員
使用export向外暴露的成員，使用{  }的形式來接收，這種形式，叫做【按需導出】
使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收
使用export導出的成員，如果想換個變量名稱接收，可以使用as來起別名
import {title, content as content1} from './test.js'

在某一個頁面使用

先引入；這里注意導入的apiapi應該和暴露出來的一致哈！
import {apiapi} from "../../http/request.js"

//監聽頁面加載（常用來發送請求）
onLoad(option){	
	apiapi("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
	    console.log("zijide",res);
		}).catch(err=>{
	    console.log(err);
	})
},

按照上面這樣封裝，會出現一個問題就是。
每次使用的時候，都會引入。這樣會很麻煩的。
因為我們幾乎每一個頁面都發是哪個請求
所以可以優化一下
將這個文件在main.js中引入。
然后掛載到Vue的原型上。
然后就可以直接使用了。因為原型的特點就是數據共享，節約空間
main.js

//因為是export暴露出來的，所以要使用{}來接受哈
import {apiapi} from "./http/request.js"

//直接掛載到原型上  通過this.$api直接調用
Vue.prototype.$api=apiapi;

在某個使用的頁面

不需要再次引入了，因為掛載到原型上的
//監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用於頁面傳參）
onLoad(option){	
	this.$api("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
	    console.log("優化封裝",res);
	}).catch(err=>{
	    console.log(err);
	})
},

我們在項目中，通常是將所有的請求放在同一個文件中。
這樣方便我們管理
所以在 https文件夾中再新建一個文件，

命名為api.js

api.js文件

import {apiapi}  from "./https.js"

export const aa= params=>apiapi('https://edu.51cto.com/center/seckill/index/get-seckill-data', 'get',params);

這一句等價於
// 如果只有一個參數，可以省略括號。params是參數。
// export const aa= params=> 說明是一個匿名函數
// 去掉大括號的時候，可以去掉retuen.

// const aa=function(params){
//    return	apiapi('https://edu.51cto.com/center/seckill/index/get-seckill-data', 'get',params)
// }
// export  aa

main.js掛載到原型上

//引入進行接收
//listapi 身上有很多的方法，那個api.js所有的方法都在listapi上
import * as listapi from './http/api.js';

//掛載到原型上
Vue.prototype.$listapi=listapi;

使用頁面

onLoad(option){	
	this.$listapi.aa( { page:1,size:1}).then(res=>{
			console.log("再次封裝11數據",res);
		}).catch(err=>{
			console.log(err);
	})
},

這樣使用起來是不是更加的簡單了。
更加的方便了呢。
將所有的接口進行統一的管理。便於維護了