簡單封裝一個微信小程式的ajax請求

在微信小程式的項目中，會經常用到wx.request請求，一般請求一多起來，就會非常的繁瑣，此時衆多繁瑣的請求封裝到一個js中，順便将微信小程式中已經封裝好的加載層也封裝起來，對性能也有些優化。

建立封裝的js

1.在項目目錄中，建立一個request檔案夾，在request檔案夾下産檢建立一個index.js檔案，

// 定義一個同時發送異步請求代碼的次數
let ajaxTimes=0;

// 異步請求的封裝
export const request=(params)=>{
	// 沒發送一次異步請求，就讓ajaxTimes+1 確定頁面有幾次請求
    ajaxTimes++;
    // 顯示加載層
    wx.showLoading({
        title: "加載中...",
        mask: true
    });
      
    // 定義公共的url 定義前面相同的url  下面拼接起來
    const baseUrl="https://********"
    return new Promise((resolve,reject)=>{
        wx.request({
        	//es6中的擴充運算符
            ...params,
            // 這裡将公共的url和傳過來的url後半段拼接起來
            url:baseUrl+params.url;
            success:(result)=>{
                resolve(result);//傳回成功資料
            },
            fail:(err)=>{
                reject(err);//傳回失敗資料
            },
            // 成功失敗都會執行complete
            complete:()=>{
            	// 這裡的ajaxTimes--是確定一個頁面裡的請求都結束了才關閉加載層
            	// 如果沒有ajaxTimes--和if的判斷，會加載一條請求後就關閉加載層
                ajaxTimes--;
                if(ajaxTimes===0){
                    // 關閉加載層
                    wx.hideLoading();
                }
            }
        })
    })
}
           

使用封裝的請求

1.在需要發送異步請求的js頁面中，引入request/index.js檔案

2.然後就可以使用request方法了

//建立一個方法發送異步請求
getDemoList(){
	request({url:"這裡寫的是公共url後面的url"})
    .then(result=>{
      this.setData({
        Liet:result.list
      })
    })
}
           

PS：好了，這就是微信小程式的一個簡單封裝一個微信小程式的ajax請求