标签：=== es6 mis 加载 技术 UNC 浏览器 openid 加载动画
前沿： 我们在写前端应用时，若数据动态，和用户有交互，就不免和数据打交道。即前端通过表单把用户输入数据传递后台。后台存数据库中。若我们需要展现，请求它后台的接口，并解析。得到对应数据。
即 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); 成功的出来返回对象
标签：=== es6 mis 加载 技术 UNC 浏览器 openid 加载动画
原文地址：https://www.cnblogs.com/liliuyu/p/11494990.html
