小程序ajax共公请求部分

Posted 2020-11-13 打个大西瓜

前沿： 我们在写前端应用时，若数据动态，和用户有交互，就不免和数据打交道。即前端通过表单把用户输入数据传递后台。后台存数据库中。若我们需要展现，请求它后台的接口，并解析。得到对应数据。

即 ajax 是 种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它底层是异步XHR请求并根据状态，通过回调函数得到。

回到主题，我们小程序，与后台交互是通过 Promise 对象，（es6语法），不过，小程序框架有现成的wx.request({url,method,data,header,success,fail}),我们可以把它放入Promise对象中。

//向服务器请求数据
import {
  isDev
} from ‘../api.js‘;
const ajax = function(options) {
  // 是否需要loading框，默认有。
  let showLoading = options.showLoading == undefined ? true : options.showLoading

  if (showLoading) {
    wx.showLoading({
      title: ‘加载中‘,
      mask: true
    })
  }
  let headerObject = {};
  headerObject[‘content-type‘] = options.contentType ? options.contentType : ‘application/x-www-form-urlencoded;charset=UTF-8‘; // application/json  application/x-www-form-urlencoded

  const token = wx.getStorageSync(‘token‘);
  const openid = wx.getStorageSync(‘openid‘)
  if (token && openid) {
    headerObject[‘token‘] = token;
    headerObject[‘openid‘] = openid;
  }
  const url = `${options.url}`;
  if (!options.method){
    console.log(`请求地址:${decodeURIComponent(options.url)}`);
    console.log(`请求参数:${JSON.stringify(options.data)}`);
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: (!options.method ? ‘POST‘ : options.method.toUpperCase()),
      data: options.data,
      header: headerObject,
      success: function(res) {
        let resMessage = JSON.stringify(res);
        if (resMessage.length > 800) {
          resMessage = resMessage.substring(0, 800);
        }
        if (isDev !== ‘PRO‘ && !options.method){
          console.log(‘返回成功结果:‘ + resMessage);
        }
        if (showLoading) {
          wx.hideLoading();
        }
        if (res) {
          if ((res.statusCode >= 200 && res.statusCode < 300) || res.statusCode === 304) {
            if (res.data) {
              resolve(res.data);
            }
          } 
        }
      },
      fail: function(error) {
        if (showLoading) {
          wx.hideLoading();
        }
        console.log(‘返回失败结果：‘ + JSON.stringify(error))
        reject(error);
      }
    })
  })
}

module.exports = ajax

　　刨析 ： 

1. 引入上次写的 api文件，通过{ isDev} 找到对应 变量

2. 定义常量ajax 把它 赋值函数，成为函数表达式，可以被引用。

3. 这函数有个形参，option 是我们默认传的值。（当没传showLoading,即是undefined让其值为真，否则就是传的布尔值），当showLoading为真，用微信wx.showLoading 方法加载动画，减少用户等待的焦急心情。

4. 定义局部变量空对象headerObject，给其 content-type属性 默认是  application/x-www-form-urlencoded (浏览器的原生 form 表单),  有则按 传递 application/json（json格式传递）,

5. 页面有的情况下， 获取页面token和openid，并给对象headerObject 属性赋值上去，并以header: headerObject,传递过去。定义常量url，decodeURIComponent url 。并把要传递获取数据Data,字符串化。

6. 返回一个Promise 对象 默认是post 请求，并要求大写。resolve(res.data); 成功的出来返回对象