前沿: 我们在写前端应用时,若数据动态,和用户有交互,就不免和数据打交道。即前端通过表单把用户输入数据传递后台。后台存数据库中。若我们需要展现,请求它后台的接口,并解析。得到对应数据。
即 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); 成功的出来返回对象