uniapp请求的封装

configConstant.js

const BASE_URL_LOCAL = "http://192.168.5.17";//本地环境
const BASE_URL_DEVELOPMENT = "https://qa.qugaiba.com"; //测试(以实际开发api文档为准)
const BASE_URL_PRODUCTION = "https://qugaiba.com"; //正式服(以实际开发api文档为准)const LOGINAPI = "/qugai/api2/v1/login/wechat"; //登录接口(以实际开发api文档为准)
const FORMIDAPI = "/qa/api/v1/"; //用于存放用户formId接口(以实际开发api文档为准)const BASE_URL = {local: `${BASE_URL_LOCAL}${FORMIDAPI}`,development: `${BASE_URL_DEVELOPMENT}${FORMIDAPI}`,production: `${BASE_URL_PRODUCTION}${FORMIDAPI}`,
};
const ENV = "local";//本地环境
// const ENV = "development";//测试环境
// const ENV = "production";//正式环境export{BASE_URL,ENV,LOGINAPI,FORMIDAPI
};

http.js

import {BASE_URL,ENV} from "./constant/configConstant.js";class rp {constructor(url, type) {this.url = `${BASE_URL[ENV]}${url}`;this.method = type;this.headers = {};this.qs = {};this.body = {};}header(v1, v2) {if (typeof v1 === 'object') {this.headers = v1;} else {this.headers[v1] = v2;}return this;}query(v1, v2) {if (typeof v1 === 'object') {this.qs = v1;} else {this.qs[v1] = v2;}return this;}send(data) {this.body = data;return this;}async end() {let auth = wx.getStorageSync('token');if (auth) {this.header('Authorization', auth);}let rpOpt = {url: this.url,header: this.headers,method: this.method,data: this.body};let isJsonType = this.method === 'POST' || this.method === 'PUT';let qs = [];for (let k in this.qs) {qs.push(`${k}=${this.qs[k]}`);}if (qs.length !== 0) {qs = qs.join('&');rpOpt.url += rpOpt.url.indexOf('?') === -1 ? `?${qs}` : `&${qs}`;}if (isJsonType) {rpOpt.data = this.body;rpOpt.dataType = 'json';if(!this.headers){rpOpt.header['Content-Type'] = 'application/json';}}let [err,res] = await uni.request(rpOpt);console.log(res.header.authorization)if(res.header?.authorization && res.header?.authorization !== auth){uni.setStorageSync("token",res.header.authorization);}let info = res.data;if(info.code === 1){return info;}if(info.message && !info.message){info.moreInfo = info.message;}return info}
}const shttp = {get: (url) => {return new rp(url, 'GET');},post: (url) => {return new rp(url, 'POST');},put: (url) => {return new rp(url, 'PUT');},delete: (url) => {return new rp(url, 'DELETE');},
};export{shttp,rp};

用法示例

在 script 中引入
```
import { shttp } from "../utils/http";
```

get 请求例子

  async gettest() {const res = await shttp.get(`apiUrl`).query({key1:'value'}).end();}

put 请求例子

  async puttest() {const res = await shttp.put(`apiUrl`).send({key1:'value'}).end();}

post 请求例子

  async posttest() {const res = await shttp.post(`apiUrl`).send({key1:'value'}).end();}

delete 请求例子

   async deletetest() {const res = await shttp.delete(`apiUrl`).query({id:id}).end();}

uniapp请求的封装相关推荐

uniapp 请求接口封装
根目录新建一个文件夹(request),里面有两个js文件,一个config.js和http.js config.js let baseUrl = ''; if (process.env.NODE_E ...
uni-app 请求封装
uni-app 请求封装请求封装 // 默认配置 const instanceConfig = {baseURL: '',header: {'content-type': 'application/ ...
python 接口测试 url_Python 接口测试之接口请求方法封装
引言前面讲过三篇文章: 既然我们接口测试用例写好了,测试数据也拿到了,那么就是模拟调用接口的方法了,方法有get,post,put,delete,具体是选择哪种,我们需要根据不同接口规定好请求方法来 ...
axios 跨域_当遇到跨域开发时，我们如何处理好前后端配置和请求库封装
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
network/request.js网络请求模块封装
网络请求模块封装 import axios from "axios"; //引入axios模块export function request(config) {//1,创建axio ...
iframe 监听内部接口是否加载完成_低成本0基础打造自己的app之uni-app请求接口以及生命周期函数...
引言此教程为教你怎么用WordPress开发一个属于你自己的app(小程序) 前面我们讲解了怎么用WP开发一个首页幻灯片接口(低成本0基础开发app之开发首页幻灯片接口),本来这一节中我们应该讲解如 ...
spring页面使用注解@RequestParam把请求参数封装到map中
spring页面请求参数封装到map中 1.使用注解@RequestParam : /*** 查询全部[对应企业的全部]* @return*/@RequestMapping(value="/ ...
C# 后台服务器端 Get 请求函数封装
请求参数封装 /// <summary> /// 拼接 Get请求参数 /// </summary> /// <param name="parames" ...

uniapp请求的封装

用法示例

uniapp请求的封装相关推荐

最新文章

热门文章