基于Promise封装uni-app的request方法，实现类似axios形式的请求
<p><code>基于Promise封装uni-app的request方法,h5和小程序均可使用</code></p><p><font size="5">特别之处</font></p>
<ul>
<li>
<p>支持Promise API</p>
</li>
<li>
<p>拦截请求和响应</p>
</li>
<li>
<p>转换请求和响应数据</p>
</li>
<li>
<p>取消请求</p>
</li>
<li>
<p>自动转换为JSON数据</p>
</li>
<li>
<p>超时请求</p>
</li>
<li>
<p>告别callback</p>
</li>
<li>
<p>支持默认请求前缀</p>
</li>
<li>
<p>支持并发请求</p>
</li>
</ul>
<p><font size="5">特别之处</font></p>
<p><code>uni-app</code>框架中</p>
<p><font size="5">安装</font></p>
<pre><code class="language-shell">npm install uni-request --save
</code></pre>
<p><font size="5">文件中引用</font></p>
<pre><code class="language-javascript">import uniRequest from 'uni-request';
</code></pre>
<p><font size="5">使用方法</font></p>
<p><font size="5">请求方法的别名</font></p>
<pre><code class="language-javascript">uniRequest.request(config)
uniRequest.get(url[, config])
uniRequest.delete(url[, config])
uniRequest.head(url[, config])
uniRequest.options(url[, config])
uniRequest.post(url[, data[, config]])
uniRequest.put(url[, data[, config]])
uniRequest.patch(url[, data[, config]])
</code></pre>
<p><font size="5">全局配置</font></p>
<pre><code class="language-javascript">uniRequest.defaults.baseURL = 'https://yourapi.domain.com';
uniRequest.defaults.headers.common['Authorization'] = AUTH_TOKEN;
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
</code></pre>
<p><font size="5">全局拦截</font></p>
<pre><code class="language-javascript">// 请求拦截
uniRequest.interceptors.request.use(
request => {
//配置基本信息
return request;
},
err => {
console.log('请求失败');
return Promise.reject(err);
});
// 响应拦截
uniRequest.interceptors.response.use(function(response) {
console.log('返回进入拦截成功')
return Promise.resolve(response);
}, function(error) {
console.log('返回进入拦截失败')
return Promise.reject(error);
});
</code></pre>
<p><font size="5">发送Get请求</font></p>
<pre><code class="language-javascript">// 向具有给定ID的用户发出请求
uniRequest.get('/user?id=12345')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 可选地，上面的请求也可以按照
uniRequest.get('/user', {
data: {
id: 'number'
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
// 想要使用 async/await？ 将`async`关键字添加到外部函数/method
async function getUser() {
try {
const response = await uniRequest.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
</code></pre>
<p><font size="5">发送Post请求</font></p>
<pre><code class="language-javascript">uniRequest.post('/user', {
firstname: 'firstname',
lastname: 'lastname'
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
键盘敲烂，薪资上万 -----by 小老弟<br><br>
来源：https://www.cnblogs.com/syncmr/p/11139611.html
頁:
[1]