微信小程序开发实战 ②①（网路请求Promise化）

@作者 : SYFStrive

 

@作者 : SYFStrive

@博客首页 : HomePage

📜： 微信小程序

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

📌：觉得文章不错可以点点关注 👉：专栏连接🔗

💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀

👉 微信小程序（🔥）

使用 npm 包 - API Promise化

   1、 基于回调函数的异步 API 的缺点

默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的，例如，网络请求的 API 需要按照如下的方
式调用：

  app(){
    wx.request({
      url: 'url',
      method:'',
      success:()=>{},
      fail:()=>{},
      complate:()=>{}
    })
  }

缺点：容易造成回调地狱的问题，代码的可读性、维护性差！

   2、 什么是 API Promise 化

API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。

   3、 实现 API Promise 化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。

安装：npm i --save miniprogram-api-promise@1.0.4

API的Primise化如 👇

// 引入promisifyAll
import {promisifyAll} from 'miniprogram-api-promise'
// 定义成员
const wxp=wx.p={}
// API Promise化
promisifyAll(wx,wxp)

   4、 使用

Promise文章链接👉 Promise

使用如下：

  app(){
    //普通网路请求
    wx.request({
      url: 'url',
      method:'',
      success:()=>{},
      fail:()=>{},
      complate:()=>{}
    }),

    //Promise化请求 👉 返回的是一个Promise（解决回调地狱的问题）
    wx.p.request({
      url:'',
      method:'',
      success:()=>{},
      fail:()=>{},
      complate:()=>{}
    })
  }

不使用 npm 包 - API Promise化

• 项目栏 管理 👇

   1、 ajax Promise化封装

// AjaxPromise化请求封装 参数: 请求路径、请求方法、携带参数
const AJAX = function (url:String,method:String,data?:Object) {
	const baseUrl = 'http://127.0.0.1:2323/'
	url = baseUrl + url
    return new Promise((resolve,reject)=>{
		uni.showLoading({title: '加载中'});
        wx.request({
          url,
          method,
          data,	
		  header:{
			"Content-Type":"application/json",
			"Content-Type":"application/x-www-form-urlencoded"
		  },
		  dataType:"json",
          success:(res)=>{
			  uni.hideLoading();
              resolve(res.data)
          },
          fail:(err)=>{
			  uni.hideLoading();
              reject(err)
          },
          complete:()=>{
			  uni.hideLoading();
            resolve('请求数据完毕...')
          }
        })
    })
}
export default AJAX

   2、 api请求管理

import RequestAjax from './ajax'
// -----------------api-----------------
export const GetData = (url,data,method) => RequestAjax(url,data,method)

   3、 使用

  async getData(){
        const data =await GetData("http://127.0.0.1:3000/data","小明",'GET')
        console.log(data);
  },

• gif 演示

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家💪

 

                 相关专栏连接🔗

下篇文章再见ヾ(￣▽￣)Bye_Bye