http请求 uni 封装_【uni-app】封装的请求方法

该博客介绍了如何在uni-app中封装HTTP请求,包括登录接口示例、请求错误处理、不同请求类型的封装以及上传文件的方法。同时提到了H5请求代理的注意事项,以防cookies丢失。
摘要由CSDN通过智能技术生成

若后期优化了再更新,(题外话: h5请求代理不能设置路径别名,否则cookies会丢失,别问我怎么知道的,说多了都是泪)

用法

//api.js

import http from './http/request.js'

// 登录

export const login = params => http.post(`login`, params)

request.js

import base from './config'

// 统一给参数

const dataObj = (url, params) => {

let options = params

// #ifdef APP-PLUS

// DOTO:暂时没处理过,只是放在这里

let data = null; //业务数据

let terminal = 1 //终端类型,web:0,app:1

options = {

...params,

data,

sign,

terminal

}

// #endif

return options

}

const goLogin = () => {

uni.clearStorageSync();

uni.reLaunch({

url: '/pages/login/Login'

}) //未授权,请重新登录(401)

}

// 请求错误处理

const checkError = (e, reject) => {

// console.error("----接口错误----", e)

if (e.data) {

if (e.data.code) {

switch (Number(e.data.code)) {

case 401:

goLogin()

break;

}

}

reject(e.data)

} else {

reject({

'msg': '接口錯誤'

})

}

}

// 封装请求

const request = (method, url, options) => {

let methods = '';

let headers = {};

switch (method) {

case 'get':

methods = 'GET'

headers = {

'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',

}

break;

case 'post':

methods = 'POST'

headers = {

'Content-Type': 'application/json; charset=UTF-8'

}

break;

case 'postForm':

methods = 'POST'

headers = {

'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

}

break;

}

let obj = {},

hideLoading = false,

loadingText = 'loading...';

if (options) { //如果有options

if (options.hideLoading) {

hideLoading = options.hideLoading

delete options.hideLoading

}

if (options.loadingText) {

loadingText = options.loadingText

delete options.loadingText

}

}

return new Promise((resolve, reject) => {

!hideLoading && uni.showLoading({

title: loadingText

})

uni.request({

url: `${base.BASE_URL}${url}`,

method: methods,

data: dataObj(url, options),

header: headers,

success: res => {

if (res.statusCode == 200) {

if (res.data && (res.data.code == 200 || res.data.code == "00")) {

resolve(res.data)

} else {

checkError(res, reject)

}

} else {

reject({

'msg': '请求錯誤(' + res.statusCode + ')'

})

}

},

fail: e => {

checkError(e, reject)

},

complete: () => {

uni.hideLoading()

}

})

})

}

// 上传文件 封装请求

const uploadFile = (url, options) => {

let tempData = options || {}

uni.showLoading({

title: "上传中..."

})

return new Promise((resolve, reject) => {

uni.uploadFile({

url: `${base.BASE_URL}${url}`,

filePath: tempData.file,

name: 'file',

formData: tempData,

success: res => {

if (res.statusCode == 200) {

let temp = JSON.parse(res.data)

// console.log('temp',temp)

if (temp.code == 200) {

resolve(temp)

} else {

reject(temp)

uni.showToast({

title: temp.msg || '接口错误(' + temp.code + ')',

icon: 'none'

})

}

} else {

uni.showToast({

title: `未知错误(${res.statusCode})`,

icon: 'none'

})

}

},

fail(e) {

uni.showToast({

title: '接口请求超时',

icon: 'none'

})

reject(e.data)

},

complete: () => {

uni.hideLoading()

}

});

})

}

export default {

get: (url, options) => {

return request('get', url, options)

},

// JOSN格式

post: (url, options) => {

return request('post', url, options)

},

// form-data格式

postForm: (url, options) => {

return request('postForm', url, options)

},

// 上传

upload: (url, options) => {

return uploadFile(url, options)

}

}

config.js

const ENV = process.env.NODE_ENV;

console.log('当前环境', process.env.NODE_ENV)

const apiHub = {

//开发环境

development: {

BASE_URL: "/api/",

IMG_URL: "https://xx",

BASE_UPLOAD_URL: "",

},

//测试环境

test: {

BASE_URL: "https://xxx",

IMG_URL: "https://xxx",

BASE_UPLOAD_URL: "",

},

//生产环境

production: {

BASE_URL: "https://xx",

IMG_URL: "https://xx",

BASE_UPLOAD_URL: "",

}

}

// 导出配置

export default {

ENV: ENV,

...apiHub[ENV]

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值