day02hard

交互

用户和小程序上进行交互的时候，某些操作可能比较耗时，我们应该予以及时的反馈以舒缓用户等待的不良情绪。
对于一些危险操作，一定要给予提示。出现错误的时候要告诉用户错误的原因，以及如何改正。这些都是前端在开发过程需要考虑的问题，也是提现我们专业性的地方。

跳转

wx.navigateTo
wx.navigateTo({
  url: 'test?id=1',
})
保留当前页面，只能打开非 tabBar 页面。
wx.redirectTo
wx.redirectTo({
  url: 'test?id=1'
})
关闭卸载当前页面，只能打开非 tabBar 页面。
wx.switchTab
wx.switchTab({
  url: '/index'
})
关闭所有非tabbar页面， 只能打开 tabBar 页面。
wx.reLaunch
wx.reLaunch({
  url: 'test?id=1'
})
关闭卸载所有页面，可以打开任意页面。
wx.navigateBack
wx.navigateBack({
  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})
返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去

# 传参

```javascript
以获取文章列表为例
    wx.request({
      url: 'https://showme.myhope365.com/api/cms/article/open/list',
      method: "POST",
      data: {
        pageNum: 1,
        pageSize: 10
      },
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      success: res => {
        console.log(res.data.rows)
      }
})
参数说明
url	开发者服务器接口地址。注意这里需要配置域名
data	  请求的参数
header	设置请求的 header，header 中不能设置 Referer，默认header['content-type'] = 'application/json'
method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	json	回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析
success	收到开发者服务成功返回的回调函数。
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

封装

作用：
添加统一的请求配置
可以添加请求拦截器和响应拦截器，在请求和响应之前加一些通用的处理。
封装的实现：
function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme.myhope365.com" + options.url
  }
	// 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器，所有接口获取数据之前，都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常，请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}