WeChat 애플릿 인터페이스 캡슐화 구현을 위한 약속 실천

많은 개발자들이 콜백 지옥의 문제에 직면했다고 생각합니다. WeChat 미니 프로그램의 API는 기본적으로 콜백 함수를 기반으로 한 비동기 작업이므로 다른 프레임워크나 캡슐화된 API를 사용하지 않는 경우, 특히 wx.request()를 많이 사용하는 경우 기본적으로 콜백 지옥의 문제에 매우 직면하게 됩니다. 유지관리가 매우 고통스러웠습니다.

예를 들어

지금 소셜 애플릿을 개발 중이라고 가정해 보겠습니다. 그 기능 중 하나는 로그인 후 애플릿 사용자가 주변 사람들을 볼 수 있다는 것입니다.

다음 구현 아이디어를 사용한다고 가정하면 wx.getLocation()을 통해 사용자의 현재 위치를 얻은 다음 wx.request()를 통해 백엔드 데이터를 요청합니다. 하지만 그 전에 로그인이 필요합니다. 이전 공식 문서에서 권장하는 로그인 방법을 참조하세요. 먼저 wx.login()을 호출하여 코드를 가져온 다음 wx.request()를 사용하여 개발자 서버에 요청합니다. 사용자 정의 로그인 상태가 성공적으로 반환된 다음(일반적으로 access_token 또는 기타 토큰 형식) 사용자 정의 로그인 상태를 사용하여 비즈니스 데이터를 요청합니다.

읽기의 편의를 위해 공식 문서에 로그인 과정을 올렸습니다⬇️

아이디어가 결정된 후 코딩을 시작했습니다(다음 코드를 읽는 것은 권장하지 않습니다)

/* 以下为Page对象的方法 */

getNearby: function() {
  // 判断是否已认证，可采用wx.checkSession()方案
  if (isAuth) {
  // TODO: 获取业务数据
    return
  }
  
  // wx.login获取code
  wx.login({
    success(res) {
      if (res.code) {
      
      // 获取自定义登录态
      wx.request({
        url,
        method, 
        headers,
        data,
        success(res) {
          // 请求成功
          if (res.statuCode === 200) {
            // 读取响应体中的自定义登录态
            let token = res.data.token
            // 保存自定义登录态
            wx.setStorageSync("assess_token", token)
            
            // 获取位置信息
            wx.getLocation({
              success(res) {
                let { latitude, longitude } = res
                
                // 请求业务数据
                wx.request({
                  url, 
                  method, 
                  header,
                  data: { latitude, longitude },
                  success(res) {
                    // 请求成功
                    if (res.statuCode === 200) {
                      let data = res.data
                      // 数据渲染到V层
                      this.setData({ list: data })
                    }
                    // 请求失败
                    else if (res.statuCode === 400) {
                      // TODO
                    }
                    // 其他错误情况状态码处理
                    // TODO
                  }, 
                  fail(err) {
                    // 调用失败处理
                  }
                })
                
              },
              fail(err) {
                // 调用失败处理
              }
            })
          }
          // 请求失败
          else if (res.statuCode == 400) {
            // TODO
          }
          // 其他错误情况的状态码处理
          },
          fail(err) {
            // 调用失败处理
          }
        })
      } 
      else {
        // TODO
        // 登录失败
      }
    }, 
    fail(err) {
      // wx.login()调用失败处理
      // TODO: ...
    }
  }) 
}

콜백 지옥 나타났다. 기공파 코드는 다른 것은 물론이고 보기만 해도 속이 메스꺼워집니다.

어느 날 현명한 제품 관리자가 일어나서 XXXXX를 추가할 수 있다고 말했습니다. 다른 WeChat 인터페이스를 중첩할 위치를 찾거나 if else 분기를 몇 개 더 추가해야 할 수도 있습니다. 울 곳을 찾아보세요. if else分支，到时候就找个地方哭吧。

解决方案

从某种意义上来说，当今风暴式的前端生态，仰仗于Node以及ES6+的出现。

ES6后对于异步有多种解决方案。一种是采用generator/yield，但generator函数使用起来其实比较麻烦。另外一种是采用Promise，相对比较简单。ES7也可以采用async/await，但本质上async/await也是基于Promise。下面介绍Promise。

Promise

---

Promise创建

创建Promise很简单，Promise本身是一个构造函数。通过new创建。构造函数的参数为一个回调函数，回调函数有两个参数为resolve和reject(无需手动维护)。resolve和reject是用来改变状态。关于状态放到后边讲。

// Promise实例的创建
let p = new Promise((resolve, reject) => {
  // TODO
})

Promise有个缺点，一旦创建便会立刻执行。所以一般会用一个函数进行包装。

let getPromise = () => {
  return new Promise((resolve, reject) => {
    // TODO    
  })
}

Promise状态

Promise实例有三种状态，pending、resolved和rejected，Promise实例创建后就会处于pending状态。回调函数中的resolve和reject就是用来改变Promise实例状态的。当调用resolve时，Promise实例会从pending变成resolved状态，表示成功。当调用reject时，Promise实例会从pending变成rejected状态，表示失败。

let getPromise = () => {
  return new Promise((resolve, reject) => {
    // TODO  
    // 处理结果
    if (result) {
      resolve(successObject)
    } 
    else {
      reject(error)
    }
  })
}

常用方法

最常用的方法为then()和catch()这两个方法，通过then()的传递效用就可以解决回调地狱的问题。

其中then()可接收两个参数，都是回调函数，第一个回调函数用来处理resolved状态，参数为Promise实例调用resolve传递的成功对象。第二回调函数用来处理rejected状态，参数为调用Promise实例调用reject传递的错误对象。

实际中then()我们一般只用来处理resolved的情况，即只传递第一个回调函数。对于rejected情况更多是采用catch()统一处理。

let getPromise = () => {
  return new Promise((resolve, reject) => {
    // TODO  
    // 处理结果
    if (result) {
      resolve(successObject)
    } 
    else {
      reject(error)
    }
  })
}

getPromise()
  .then(res => {
    console.log(res)
    // TODO
  })
  .catch(err => {
    //TODO
  })

使用then()方法可以继续返回一个Promise对象，通过return一个新的Promise，可以持续的向下传递。

getPromise()
  .then(res => {	//第一层Promise
    console.log(res)
    // TODO
    return getPromise()
    )
  .then(res => {	// 第二层Promise
    console.log(res)
    // TODO
  })
  .catch(err => {
    // TODO
  })

其他常用方法有诸如Promise.all()，Promise.race()。当需要等待多个Promise结果时会采用。两个方法都是接收一个由Promise组成的对象数组。使用Promise.all()时，只有当全部的Promise对象全部resolved Promise.all()状态才是resolved。而Promise.race()只需有一个Promise对象为resolved

솔루션

어떤 의미에서 오늘날의 폭풍우가 몰아치는 프런트엔드 생태계는 Node와 ES6+의 출현에 의존하고 있습니다.

ES6 이후에는 비동기식 솔루션이 많이 있습니다. 하나는 generator/yield를 사용하는 것이지만 실제로는 generator 함수를 사용하는 것이 더 번거롭습니다. 다른 하나는 비교적 간단한 Promise를 사용하는 것입니다. ES7은 async/await도 사용할 수 있지만 기본적으로 async/awai도 Promise를 기반으로 합니다. 다음은 Promise를 소개합니다.

---

Promise

🎜🎜🎜Promise Creation🎜🎜🎜Promise를 만드는 것은 간단합니다. Promise 자체는 생성자입니다. 신규를 통해 생성되었습니다. 생성자의 매개변수는 콜백 함수이고 콜백 함수에는 해결 및 거부라는 두 가지 매개변수가 있습니다(수동 유지 관리가 필요하지 않음). 해결 및 거부는 상태를 변경하는 데 사용됩니다. 상태에 대해서는 나중에 이야기하겠습니다. 🎜

/* 可以将公用的方法挂在app.js中 */

request: function(method, url, header, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      method, 
      url, 
      header, 
      data,
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

🎜Promise에는 단점이 있습니다. 생성되면 즉시 실행됩니다. 따라서 일반적으로 기능과 함께 패키지됩니다. 🎜

request: function(method, url, header = {}, data = {}) {
  // 启动时可将storage中的令牌挂到app.js 
  let token = app.assess_token
  if (token) {
    header["Authorization"] = token
  }
  return new Promise((resolve, reject) => {
    wx.request({
      method, 
      url: "https://api.domain.com/v1" + url,
      header, 
      data,
      success(res) {
        // 请求成功
        if (res.statusCode === 200) {
          resolve(res)
        }
        // 请求成功无响应体
        else if (res.statusCode === 204) {
          /* 
          可做一些成功提示，
          如调用wx.showToast()、wx.showModal()或自定义弹出层等 
          */
          resolve(res)
        }
        // 未认证
        else if (res.statusCode === 401) {
          /* 可做一些错误提示，或者直接跳转至登录页面等 */
          reject(res)
        }
        else if (res.statusCode == 400) {
        /* 可做一些错误提示*/
          reject(res)
        }
        else if (res.statuCode === 403) {
          /* 无权限错误提示*/
          reject(res)
        }
        // ...其他状态码处理
      },
      fail(err) {
        /* 可做一些全局错误提示，如网络错误等 */
        reject(err)
      }
    })
  })
}

🎜Promise 상태🎜🎜Promise 인스턴스에는 pending, resolved, rejected, Promise 인스턴스 생성이라는 세 가지 상태가 있습니다. 그러면 pending 상태가 됩니다. 콜백 함수의 resolve 및 reject는 Promise 인스턴스의 상태를 변경하는 데 사용됩니다. resolve가 호출되면 Promise 인스턴스가 pending에서 resolved 상태로 변경되어 성공을 나타냅니다. reject가 호출되면 Promise 인스턴스가 pending에서 rejected 상태로 변경되어 실패를 나타냅니다. 🎜

/* 方法体中 */
let app = getApp()

app.request("POST", "/auth", {}, { username, password })	 
  .then(res => {  // 第一层请求
    // TODO 成功处理
    return app.request("GET", "/goods", {}, {})
  })
  .then(res => {	// 第二层请求
    // TODO 成功处理
    // 渲染视图
  })
  .catch(err => {
    // TODO 错误处理
  })

🎜일반적으로 사용되는 메소드🎜🎜가장 일반적으로 사용되는 메소드는 then() 및 catch()를 통해 then() 유틸리티를 전달합니다. 콜백 지옥 문제를 해결합니다. 🎜🎜 그 중 then()은 두 개의 매개변수를 받을 수 있는데, 둘 다 콜백 함수입니다. 첫 번째 콜백 함수는 resolved 상태를 처리하는 데 사용되며 매개변수는 다음과 같습니다. Promise code>인스턴스 호출이 전달한 성공 개체입니다. 두 번째 콜백 함수는 <code>rejected 상태를 처리하는 데 사용됩니다. 매개변수는 Promise 인스턴스의 Reject 인스턴스를 호출하여 전달된 오류 개체입니다. 🎜🎜실제로는 해결된 상황을 처리하기 위해 일반적으로 then()만 사용합니다. 즉, 첫 번째 콜백 함수만 전달합니다. 거부 상황의 경우 catch()를 사용하여 이를 균일하게 처리합니다. 🎜

/* 可以将公用的方法挂在app.js中 */
wxLogin: function() {
  return new Promise((resovle, reject) => {
    wx.login({
      success(res) {
        if (res.code) {
          resovle(res)
        }
        else {
          reject({ message: "登录失败" })
        }
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

getLocation: function() {
  return new Promise((resolve, reject) => {
    wx.getLocation({
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

🎜then() 메서드를 사용하면 새로운 Promise를 return하여 Promise 개체를 계속 반환할 수 있습니다. , 지속적으로 전달될 수 있습니다. 🎜

/* Page对象的方法 */

getNearby: function() { 
  // 判断是否已认证，可采用wx.checkSession()方案
  if (isAuth) {
    // TODO: 获取业务数据
    return
  }
  
  app.wxLogin()
    .then(res => {
      // 将code发送给开发者服务器，获取自定义登录态
      return app.request("POST", "/auth", {}, { code, res.code })
    })
    .then(res => {
      // 保存自定义登录态
      setStorage("access_token", res.data.access_token)
      // TODO: 其他登录成功操作...	
      return app.getLocation()
    })
    .then(({ latitude, longitude }) => {
      let url = "/nearby?latitude=" + latitude + "&longitude=" + longitude
      return app.request("GET", url)
    })
    .then(res => {
      // TODO: 数据处理
      let data = res.data
      // 渲染视图层
      this.setData({ data })
    })
    .catch(err => {
      // TODO 错误处理
    })
    
}

🎜일반적으로 사용되는 다른 메서드로는 Promise.all(), Promise.race()가 있습니다. 여러 Promise 결과를 ​​기다려야 할 때 사용됩니다. 두 메서드 모두 Promise로 구성된 개체 배열을 받습니다. Promise.all()을 사용할 때 모든 Promise 객체가 해결된 Promise.all() 상태인 경우에만 해결됨. Promise.race()에서 <code>해결하기 위해 하나의 Promise 객체만 필요한 경우 해당 상태가 해결됩니다. 🎜🎜관련 문서를 읽는 더 많은 방법. 🎜🎜🎜미니 프로그램 인터페이스 캡슐화🎜🎜🎜🎜 Promise의 기본 사항을 학습한 후 비동기 작업을 캡슐화하고 Promise 체인을 사용하면 콜백 지옥 문제를 해결할 수 있습니다. 🎜🎜wx.request()가 더 자주 사용되기 때문에 wx.request()를 먼저 캡슐화합니다. 🎜

/* 可以将公用的方法挂在app.js中 */

request: function(method, url, header, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      method, 
      url, 
      header, 
      data,
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

基本框架就这样，我们可以进一步修改，比如请求url的基础路径，添加一些公用的header，针对状态码做一些全局处理等。

request: function(method, url, header = {}, data = {}) {
  // 启动时可将storage中的令牌挂到app.js 
  let token = app.assess_token
  if (token) {
    header["Authorization"] = token
  }
  return new Promise((resolve, reject) => {
    wx.request({
      method, 
      url: "https://api.domain.com/v1" + url,
      header, 
      data,
      success(res) {
        // 请求成功
        if (res.statusCode === 200) {
          resolve(res)
        }
        // 请求成功无响应体
        else if (res.statusCode === 204) {
          /* 
          可做一些成功提示，
          如调用wx.showToast()、wx.showModal()或自定义弹出层等 
          */
          resolve(res)
        }
        // 未认证
        else if (res.statusCode === 401) {
          /* 可做一些错误提示，或者直接跳转至登录页面等 */
          reject(res)
        }
        else if (res.statusCode == 400) {
        /* 可做一些错误提示*/
          reject(res)
        }
        else if (res.statuCode === 403) {
          /* 无权限错误提示*/
          reject(res)
        }
        // ...其他状态码处理
      },
      fail(err) {
        /* 可做一些全局错误提示，如网络错误等 */
        reject(err)
      }
    })
  })
}

封装之后，举个例子，发送请求就可以修改为

/* 方法体中 */
let app = getApp()

app.request("POST", "/auth", {}, { username, password })	 
  .then(res => {  // 第一层请求
    // TODO 成功处理
    return app.request("GET", "/goods", {}, {})
  })
  .then(res => {	// 第二层请求
    // TODO 成功处理
    // 渲染视图
  })
  .catch(err => {
    // TODO 错误处理
  })

封装一下其他的微信接口

/* 可以将公用的方法挂在app.js中 */
wxLogin: function() {
  return new Promise((resovle, reject) => {
    wx.login({
      success(res) {
        if (res.code) {
          resovle(res)
        }
        else {
          reject({ message: "登录失败" })
        }
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

getLocation: function() {
  return new Promise((resolve, reject) => {
    wx.getLocation({
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

对于最初的例子，可以就修改为

/* Page对象的方法 */

getNearby: function() { 
  // 判断是否已认证，可采用wx.checkSession()方案
  if (isAuth) {
    // TODO: 获取业务数据
    return
  }
  
  app.wxLogin()
    .then(res => {
      // 将code发送给开发者服务器，获取自定义登录态
      return app.request("POST", "/auth", {}, { code, res.code })
    })
    .then(res => {
      // 保存自定义登录态
      setStorage("access_token", res.data.access_token)
      // TODO: 其他登录成功操作...	
      return app.getLocation()
    })
    .then(({ latitude, longitude }) => {
      let url = "/nearby?latitude=" + latitude + "&longitude=" + longitude
      return app.request("GET", url)
    })
    .then(res => {
      // TODO: 数据处理
      let data = res.data
      // 渲染视图层
      this.setData({ data })
    })
    .catch(err => {
      // TODO 错误处理
    })
    
}

之后若有需添加新的请求或者其他异步操作，直接在Promise链上操作就行了。

推荐教程：《微信小程序》

위 내용은 WeChat 애플릿 인터페이스 캡슐화 구현을 위한 약속 실천의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!