第一步：构建组件大致框架

很多时候我们要了解到界面设计中到底包含了哪些元素，数据，以及div盒子的大致构成，从而先进行了简单的页面搭建，将组建初步设计好。

如以下页面，大致由三部分组成：每个部分有还有自己的构成

第二步：编写请求文档

请求属性赋值与是否成功判定

通常会写一个公用的请求文档，里面包含了各种页面发来的各种情况。一般会是有一个公用的后端数据接口前缀baseUrl与你所需要的数据的地址后缀url来拼接组成后端数据接口地址（这里可以体现文档重要性）。以下代码是对这个后端接口数据的响应情况处理，说明访问成功和访问不成功的各种情况。

// 公用的请求
const baseUrl = "https://meituan.thexxdd.cn/api/"
// 获取token//npm install --save js-base64 对token进行前端加密
import { Base64 } from "js-base64"
function getToken(): string {
  //存储到本地
  const token = uni.getStorageSync('wxuser').user_Token || ''
  //进行加密
  const base64_taken = Base64.encode(token + ':')
  //返回给前端调用的用户
  return 'Basic ' + base64_taken
}

// 请求定义有三个参数
function request(
  url: string,
  method: 'GET' | 'POST',
  data: string | object | ArrayBuffer
) {
  //请求是需要时间的所以可以包装成一个事件,传输,只有url需要拼接
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      method,
      data,
      //header获取你的信息，给你访问权限,token唯一标识
      header: { Authorization: getToken() },
      //访问成功的下一步骤
      success: (res: any) => {
        if (res.statusCode == 200) {
          //成功请求200
          resolve(res)
        } else if (res.statusCode == 401) {
          //没有请求权限，访问接口，一般没有登录
          uni.navigateTo({ url: "/pages/login-page/index" })
          //告知前端
          reject(res)
        } else if (res.statusCode == 400) {
          //服务器发生错误,给与用户提示
          uni.showToast({
            title: '开发者某个字段或参数填写不对',
            icon: 'none',
            duration: 1500
          });
          reject(res)
        } else if (res.statusCode == 500) {
          //服务器发生错误,给与用户提示
          uni.showToast({
            title: '服务器发生错误',
            icon: 'none',
            duration: 1500
          });
          reject(res)
        } else if (res.statusCode == 202) {
          //信息没有填完整
          uni.showToast({ title: res.data.msg, icon: 'none', duration: 1000 });
          reject(res);
        } else {
          uni.showToast({
            title: '服务器发生未知错误',
            icon: 'none',
            duration: 1500
          });
          reject(res)
        }
      },
      fail: (err: any) => {
        uni.showToast({
          title: '服务器发生未知错误',
          icon: 'none',
          duration: 1500
        });
      }
    })
  })