简单封装一个微信小程序的ajax请求

简单封装一个微信小程序的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文件

import { request } from "../../request/index";

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

//创建一个方法发送异步请求
getDemoList(){
	request({url:"这里写的是公共url后面的url"})
    .then(result=>{
      this.setData({
        Liet:result.list
      })
    })
}

PS：好了，这就是微信小程序的一个简单封装一个微信小程序的ajax请求