小程序最常被问的两道面试题：如何授权登录；如何请求接口

也可能是我被问的最多的，哈哈哈哈！！！（毕竟太菜了，记录一下）

接下来，我们聊聊：

小程序如何授权登录

大家最常见的就是这张图：

那么，用代码来解释，如下：

    wx.login({
      success: res => {
        console.log(res.code)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        wx.showLoading({title: '加载中...'})
        wx.request({
          url: '',
          method: 'POST',
          data: {},
          success: (res) => {
            console.log(res);
          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
            console.log('已完成'); 
            wx.hideLoading()
          }
        })
      },
    })

用语言描述：

• 点击登录按钮，调用wx.login(),在其回调中获取到前端小程序临时凭证code
• 调用wx.request()请求登录接口，在其success回调中获取到openid sessionid(token), unionid, 将获取到的这些值都可以存放在storage中
• 请求方法可以做一个封装，按实际业务来处理

小程序如何请求

在小程序里，与H5页面的请求方式不同，小程序中有自己的请求方法：wx.request,且必须是https协议请求。

下面，我们看一下代码

wx.request({  // 小程序请求方法

  url: 'https://test.com/getinfo', // 小程序请求接口

  success: function(res) { // 成功回调

    console.log(res)// 服务器回包信息 会接收到一个Object信息,包括：data,code，msg

  },
  fail: function(err) { // 失败回调
    console.log(err)
  }
  complete: function(err) { // 无论成功还是失败，总是会执行
    console.log(err)
  }
})

关于request中的参数

• 超时时间：小程序request默认超时时间是60S，我们可以在配置里修改超时时间

"networkTimeout": {

    "request": 3000

  }

• 当我们请求的时候需要加一个‘加载中...’的状态，可以在请求之前加上wx.showLoading(),在complete回调中关闭：wx.hideLoading()[因为complete总是会被执行]

• 有一点要注意，主要成功收到服务器返回，无论HTTP状态码是多少都会进入success回调，因此需要自己对回报的返回码进行一次逻辑判断。