Uni-app-封装request.js - Powered by Discuz! Archiver

李曙君 發表於 2020-8-10 14:39:00

Uni-app---封装request.js

最近在用Uni-app做混合APP开发，对于众多的接口请求，为了方便管理，采用封装request来方便管理。简单代码示例：
在utils目录新建config.js文件，用于做配置
<div class="cnblogs_code">
<pre>let host = "";
if(process.env.NODE_ENV === 'development'){
// 开发环境
host = "http://www.dianphp.com/";
}else{
// 生成环境
host = "http://www.dianphp.com/";
}
export default host;</pre>
</div>
在utils目录新建request.js文件，用于分装请求
<div class="cnblogs_code">
<pre>import host from './config.js'
const header = {}
const request = (url='',method='POST',data={}) => {
header['content-type'] = "application/x-www-form-urlencoded";
return new Promise((resolve,reject) => {
 uni.request({
 method:'post',
 url:host + url,
 data:data,
 header:header,
 dataType:'json'
 }).then((response) => {
 let = response;
 // 登录过期
 if(res.code == 10086){
 uni.showToast({
 title:'登录过期,请重新登录',
 duration:2000
 });
 };
 resolve(res.data);
 }).catch((error) => {
 let = error;
 reject(err);
 });
});
}
export default request</pre>
</div>
新建api目录，存放api.js
<div class="cnblogs_code">
<pre>import request from '@/utils/request.js'
module.exports = {
// 登录
 login(data){
 return request('api/user/login','post',data);
}
}</pre>
</div>
在需要进行http请求的页面如何使用？
第一步：引入api.js
<div class="cnblogs_code">
<pre>import api from '@/api/api.js'</pre>
</div>
第二步：使用api
<div class="cnblogs_code">
<pre>api.login(this.accountPassword).then(res => {
console.log(res);
});</pre>
</div>
其他方法示例：
utils目录新建request.js用于分装请求 
<div class="cnblogs_code">
<pre>export default class Request {
http (router,data={},method) {
 // 基础地址
 let path = 'http://tm.jiangzi.com/v1';
 // 返回promise
 return new Promise((resolve,reject) => {
 // 请求
 uni.request({
 url: `${path}${router}`,
 data: data,
 method:method,
 header: {
 'content-type': 'application/json' ,
 'X-Requested-With':'XMLHttpRequest'
 },
 success: (res) => {
 // 将结果抛出
 resolve(res.data)
 }
 })
 })
}
}</pre>
</div>
新建api.js
<div class="cnblogs_code">
<pre>import Request from './request.js';
let request = new Request().http
//请求方法
export default {
getPageData: function (data) {
 return request('/category',data,'POST')
},
getSearch: function (data) {
 return request('/search',data,'POST')
},
getrichtext: function (url) {
 return request(url,'','GET')
}
}</pre>
</div>
组件里面调用：
<div class="cnblogs_code">
<pre>import api from '../../static/js/api.js';
api.getPageData('').then(res => {
console.log(res)
})</pre>
</div>
另外，还可以将api.js进行全局引入：
第一步：在main.js里面进行引入：
<div class="cnblogs_code">
<pre>import api from './api/api.js'</pre>
</div>
第二步：放到全局
<div class="cnblogs_code">
<pre>Vue.prototype.$api = api</pre>
</div>
接口调用：
<div class="cnblogs_code">
<pre>this.$api.login({username:'张三',password:'123456'}).then((res) => {
console.log(res);
});</pre>
</div>
  
来源：https://www.cnblogs.com/e0yu/p/13469653.html

頁: [1]

琼殿技术论坛's Archiver

Uni-app---封装request.js