JavaScript - request封装
<h3 id="request封装微信小程序使用asyncawait">request封装——微信小程序使用async，await</h3><h4 id="es5">ES5</h4>
<blockquote>
<p>参考代码</p>
</blockquote>
<pre><code class="language-javascript">var request = function(param){
var _this = this;
$.ajax({
type : param.method|| 'get',
url : param.url || '',
dataType : param.type || 'json',
data : param.data || '',
success : function(res){
// 请求成功
if(0 === res.status){
typeof param.success === 'function' && param.success(res.data, res.msg);
}
// 没有登录状态，需要强制登录
else if(10 === res.status){
_this.doLogin();
}
// 请求数据错误
else if(1 === res.status){
typeof param.error === 'function' && param.error(res.msg);
}
},
error : function(err){
typeof param.error === 'function' && param.error(err.statusText);
}
});
}
</code></pre>
<h4 id="es6promise">ES6——promise</h4>
<blockquote>
<p>这里以微信小程序开发为例，jquery同理</p>
</blockquote>
<pre><code class="language-javascript">// request.js
export const request = (params) => {
const baseUrl = 'https://api.com';
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
})
})
}
</code></pre>
<blockquote>
<p>考虑到加载图标</p>
</blockquote>
<pre><code class="language-javascript">// 同时发送异步请求的次数
let ajaxTimes = 0;
export const request = (params) => {
ajaxTimes ++;
// 加载图标
wx.showLoading({
title: '加载中',
mask: true
});
const baseUrl = 'https://api.com';
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result.data.message);
},
fail: (err) => {
reject(err);
},
complete: () => {
ajaxTimes --;
if(ajaxTimes === 0) {
wx.hideLoading();
}
}
})
})
}
</code></pre>
<blockquote>
<p>使用前需要引入request.js文件（更换为自己的文件目录）</p>
</blockquote>
<pre><code class="language-javascript">import { request } from "../../request.js";
</code></pre>
<blockquote>
<p>使用promise的then方法获取数据</p>
</blockquote>
<pre><code class="language-javascript">getData() {
request({url: '/dataUrl'})
.then((result) => {
……
},(err) => {
……
})
}
</code></pre>
<h4 id="es7asyncawait">ES7——async，await</h4>
<blockquote>
<p>注意：使用async，await必须建立在promise的基础上，所以还要用到上面的ES6——promise所述内容</p>
</blockquote>
<h5 id="微信小程序支持es7">微信小程序支持ES7</h5>
<blockquote>
<p>1.下载runtime.js文件到自己的项目文件夹</p>
</blockquote>
<p>地址：runtime.jsgithub</p>
<blockquote>
<p>2.在所有用到async，await的文件都要引入</p>
</blockquote>
<pre><code class="language-javascript">import regeneratorRuntime from "../../lib/runtime/runtime.js";
</code></pre>
<h5 id="使用asyncawait">使用async，await</h5>
<pre><code class="language-javascript">async getData() {
const result = await request({url: '/dataUrl'});
……
}
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
完结～<br><br>
来源：https://www.cnblogs.com/lwlblog/p/12346215.html
頁:
[1]