(小程序篇)13.封装http请求

说明：结合lin-ui函数库的promisic

1.定义js方法

在util目录下新建http.js

/**
 * http请求封装
 * ...
 */
import {promisic} from './util';
import {config} from '../config/config';

class Http{
  // request请求
  static async request({url,data,method = 'POST'}){
    const res = await promisic(wx.request)({
      url: `${config.apiBaseUrl}${url}`,
      data,
      method,
      header:{
        'content-type': 'application/x-www-form-urlencoded',
        'token': wx.getStorageSync('token'), // 获取token上传
      }
    })
    return res.data;
  }
}

export {
  Http
}

2.定义调用方法模型

在根目录下的model文件下新建 user.js

/**
 * 用户信息接口 
 */
import { Http } from '../utils/http';
class User{
  // 小程序登录传递code和userinfo
  static async login({
    code,userinfo
  }){
    return await Http.request({
      url: 'login/login',
      data: {
        code,
        userinfo
      }
    })
  }
}
export {
  User
}

3.页面调用接口完成小程序登录

.wxml 中

<view class="container">
  <l-button bindgetuserinfo="enterLogin" bind:lintap="clickSend" open-type="getUserInfo">按钮</l-button>
</view>

.js 中
PS：这里面包含小程序点击登录授权，登录成功之后登录信息的缓存，以及配合自动获取token

import { User } from '../../model/user';
page({
	...
	enterLogin(e){
      if(e.detail.errMsg === "getUserInfo:ok"){
        // 用户信息
        let userinfo = JSON.parse(e.detail.rawData);
        // 获取code
        wx.login({
          success:async res=>{
            let code = res.code;
            const userData = await User.login({code,userinfo});
            if(userData.code === 1000){
              this.setData({
                userInfo:userData.data
              })
              // 登录信息缓存
              wx.setStorageSync('token', userData.data.token)
              wx.setStorageSync('userInfo', userData.data)
            }else{
              wx.showToast({
                title: userData.message,
                icon: 'none'
              })
            }
          }
        })
      }else{
        wx.showToast({
          title: '授权失败',
          icon: 'none'
        })
      }
    }
    ...
})