uniapp的请求封装

https://www.cnblogs.com/gqx-html/p/10967570.html

1.环境配置 (可参考uni-官网的环境配置)

common文件夹下新建config.js

let url_config &＃61; ""if(process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;development&＃39;){// 开发环境url_config &＃61; &＃39;https://*****.com/&＃39;
}else{// 生产环境url_config &＃61; &＃39;https://*****.com/&＃39;
}export default url_config

2.uni.request封装

common文件夹下新建request.js

import urlConfig from &＃39;./config.js&＃39;const request &＃61; {}
const headers &＃61; {}
const PORT1 &＃61; &＃39;/baseinfo&＃39;request.globalRequest &＃61; (url, method, data, power) &＃61;> {
/* 权限判断 因为有的接口请求头可能需要添加的参数不一样&＃xff0c;所以这里做了区分1 &＃61;&＃61; 不通过access_token校验的接口2 &＃61;&＃61; 文件下载接口列表3 &＃61;&＃61; 验证码登录 */switch (power){case 1:headers[&＃39;Authorization&＃39;] &＃61; &＃39;Basic a3N1ZGk6a3N1ZGk&＃61;&＃39;break;case 2:headers[&＃39;Authorization&＃39;] &＃61; &＃39;Basic a3N1ZGlfcGM6a3N1ZGlfcGM&＃61;&＃39;break;case 3:responseType &＃61; &＃39;blob&＃39;break;default:headers[&＃39;Authorization&＃39;] &＃61; &＃96;Bearer ${this.$store.getters.userInfo}&＃96;headers[&＃39;TENANT-ID&＃39;] &＃61; this.$store.getters.userInfo.tenant_idbreak;}return uni.request({url: urlConfig &＃43; url,method,data: data,dataType: &＃39;json&＃39;,header: headers}).then(res &＃61;> {if (res[1].data.status && res[1].data.code &＃61;&＃61; 200) {return res[1]} else {throw res[1].data}}).catch(parmas &＃61;> {

　　　　　　switch (parmas.code) {

　　　　　　　　case 401:

　　　　　　　　　　uni.clearStorageSync()

　　　　　　　　　　break

　　　　　　　　default:

　　　　　　　　　　uni.showToast({

　　　　　　　　　　　　title: parmas.message,

　　　　　　　　　　　　icon: &＃39;none&＃39;

　　　　　　　　　　})

　　　　　　　　　　return Promise.reject()

　　　　　　　　　　break

　　　　　　}

　　})

} export default request

3.接口配置

项目根目录下新建api文件&＃xff0c;api下新建index.js

import request from &＃39;&＃64;/common/request.js&＃39;
import { formatGetUri } from &＃39;&＃64;/common/util.js&＃39;const api &＃61; {}
const PORT1 &＃61; &＃39;baseinfo&＃39;
// POST请求方式
api.register &＃61; params &＃61;> request.globalRequest(&＃96;${PORT1}/mobile/signUp&＃96;, &＃39;POST//必须大写&＃xff0c;为了兼容其他应用&＃39;, params, 1)
// GET请求方式
api.register &＃61; params &＃61;> request.globalRequest(&＃96;${PORT1}/mobile/signUp${formatGetUri(params)}&＃96;, &＃39;GET //必须大写&＃xff0c;为了兼容其他应用&＃39;,{}, 1)

export default api

4. 新建common/util.js

5.全局配置

在main.js中新增

import Vue from &＃39;vue&＃39;
import App from &＃39;./App&＃39;
import store from &＃39;./store&＃39; // 与vue项目中配置相同&＃xff0c;可自行配置import request from &＃39;./common/request.js&＃39;
import api from &＃39;./api/index.js&＃39;
import url from &＃39;./common/config.js&＃39;Vue.config.productionTip &＃61; false
Vue.prototype.$request &＃61; request
Vue.prototype.$api &＃61; api
Vue.prototype.$url &＃61; urlApp.mpType &＃61; &＃39;app&＃39;const app &＃61; new Vue({...App,store
})app.$mount()

5.接口调用

this.$api.register({mobile: this.mobile}).then(res &＃61;> {// 获得数据 console.log(res)
}).catch(res &＃61;> {// 失败进行的操作
})