微信小程序请求使用promise方式防止回调地狱

当异步请求中包含异步请求，也许就陷入了回调地狱模式了。那么有什么办法解决上面的问题呢？

那就是使用es6的promise来处理这个问题。

我们先创建一个专门处理请求的js文件，例如：request.js文件，里面的代码如下：

#request.js
export const request=(params)=>{
  // resolve:成功时执行的回调函数。reject：失败时执行的回调函数。`...params`为请求传入的参数，会自动解构成各个需要的参数
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      success:(result)=>{
        resolve(result);
      },
      fail:(err)=>{
        reject(err);
      }
    })

  })
}

接着当我们使用这个公共js时，我们需要先导入上面的js文件，接下来再使用，代码如下:

//需要先导入这个js，导入时后面的路径必须是全名
import {request} from "../customComponent/request.js";
Page({
  data:{},
  onload(){
    //request里面的参数就是请求时需要传的参数
    request({url:"",data:'',method:'',dataType:''})
      .then(result => {
        //处理请求成功后的操作
      },
      reslove => {
        //处理请求失败后的操作
      })
      .then()
      //根据需要还可以继续添加`.then()`
  }
})

如上面所示，这样就会清晰明了很多了。

解决回调的另一种方法：

使用es7的async，因为小程序没有说明可以使用es7，所以需要按一下步骤：
1、在小程序开发工具中，勾选es6转es5语法
2、下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js
3、在小程序目录下新建文件夹lib/runtime/runtime.js，将下载的代码拷贝进去
4、在每一个需要使用async语法的页面js文件中，都引入(不能全局引入)

import regeneratorRuntime from 'js文件的路径';

使用async语法：

async getUserInfo(){
  //1、使用es7的async和await来发送请求
  const result = await request({url:""});
  //接下来处理请求的结果result，result相当于.then()方法中的result
  //需要注意的是，当上面的result没有返回结果时，是不会向下执行代码的
}

注意：
 1、因为await，所以当result没有返回结果时，是不会继续向下执行代码的
 2、上面步骤的处理方法在某些机型上不支持
 3、具体async语法的东西可以自己再去详细看

写在最后：

• 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
• 文章我也会根据所学到新的知识不断更新。