美文网首页程序园技术初心
小程序-async / await 与 http

小程序-async / await 与 http

作者: triplestudio | 来源:发表于2019-10-31 12:11 被阅读0次

    一、前言

    (1)开启

    在微信小程序(基础库 2.8.3)中使用 async 与 await,需要“取消勾选ES6转ES5”或者“勾选增强编译”。


    (2)Promise

    Promise 用于解决肆虐在回调代码中控制倒转的问题。
    它没有摆脱回调,而是重新定向了这些回调的组织安排方式。Promise 链还以顺序的风格定义了一种更好的表达异步流程的方式,帮助我们更好地规划和维护异步JS代码。

    (3)云函数的 npm install

    在云函数的文件夹右键,选择在终端中打开,再执行 npm install 命令。

    二、async / await

    2.1、当一个方法加上 async 声明

    (1)这个方法的返回结果就变成了一个 Promise,可以 .then() 来继续对返回值进行处理;
    (2)方法体中就可以使用 await 关键词来同步的获取异步结果。

    2.2、一个示例

      test_async : async function(){
        var result = await wx.cloud.callFunction({
            name: "http",
            data: {
              url: "http://******/"
            }
          });
    
        console.log(result);
      }
    

    三、http

    3.1、建立 HTTP 云函数

    (1)建立云函数并命名为 http
    (2)index.js 代码为
    // 云函数入口文件
    const cloud = require('wx-server-sdk');
    const request = require('got');
    
    cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
      const url = event.url;
      const method = event.method || 'get'; 
      var options = {};
      options.method = method;
      if(event.headers) options.headers = event.headers;
      if(event.body) options.body = JSON.stringify(event.body);
    
      let response = await request(url, options);
    
      return response.body;
    }
    
    (3)got module 的安装

    上述代码中,使用到 require('got'),表示依赖于 got 模块,需要进行安装。安装步骤:
    1)在云函数 http 文件夹上右键,选择“在终端中打开”
    2)执行以下命令安装

    npm install --save got
    

    3)在云函数 http 下的 node_modules 上右键,选择“云函数增量上传:更新文件夹”。这一步的目的是把安装的 got 上传到微信云端。
    如果在 http 上选择“上传所有文件”,则在本地也需要执行以下命令把 wx-server-sdk 在本地安装一下。

    npm install --save wx-server-sdk
    

    3.2、使用示例

    (1)get 方式
      test_http_get: function () {
        wx.cloud.callFunction({
          name: "http",
          data: { 
            url: "http://******/api?a=1&b=2" 
          },
          success: function (resp) {
            var data = resp.result; 
            console.log(data);
          },
          fail: function (err) {
            console.log(err);
          }
        });
      }
    
    (2)post 方式,body 内容为 json 的情形
      test_http_post: function () {
        wx.cloud.callFunction({
          name: "http",
          data: {
            method: "POST",
            url: "http://******/api",
            headers: {
              'Content-Type': 'application/json'
            },
            body: {
              a: 1,
              b: 2
            }
          },
          success: function (resp) {  
            var data = JSON.parse(resp.result);
            console.log(data);
          },
          fail: function (err) {
            console.log(err);
          }
        });
    

    四、参考

    (1)async await 处理异步变同步(微信小程序内举例)
    (2)微信小程序云开发(云函数)学习笔记01-发送http请求
    (3)https://www.npmjs.com/package/got

    相关文章

      网友评论

        本文标题:小程序-async / await 与 http

        本文链接:https://www.haomeiwen.com/subject/gnezmctx.html