luch-request与uni.request比较
https://github.com/lei-mu/luch-request
luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库,它有更小的体积,易用的api,方便简单的自定义能力。
支持全局挂载
- 支持多个全局配置实例
- 支持自定义验证器
- 支持文件上传/下载
- 支持task 操作
- 支持自定义参数
- 支持多拦截器
- 对参数的处理比uni.request 更强
方法一: luch-request
安装依赖 // uview使用的封装接口
npm install luch-request -S
@/config/request.js
import Request from 'luch-request'
import { baseUrl } from './index.js'
const http = new Request()
/* config 为默认全局配置*/
http.setConfig((config) => {
config.baseURL = baseUrl /* 根域名不同 */
config.header = {
...config.header,
}
return config
})
/* 在请求之前拦截 */
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
uni.showLoading({
mask: true
})
// console.log('在请求之前拦截', config);
config.header = {
...config.header
}
return config
})
/* 在请求之后拦截 */
http.interceptors.response.use((response) => {
uni.hideLoading()
// console.log('在请求之后拦截', response);
const status = response.statusCode
if(status === 200){
if(response.data.code === 200){
return response.data
}else if(response.data.code === 401){
uni.showToast({
icon: 'none',
title: '认证失败!'
});
return Promise.reject('认证失败!');
}else if(response.data.code === 500){
uni.showToast({
icon: 'none',
title: '服务器内部错误!'
});
return Promise.reject('服务器内部错误!');
}else{
uni.showToast({
icon: 'none',
title: response.data.msg || '请求错误!',
});
return Promise.reject(response.data.msg || '请求错误!');
}
}else {
uni.showToast({
icon: 'none',
title: '未知错误!',
});
return Promise.reject("未知错误!");
}
}, (response) => {
uni.hideLoading()
// console.log('响应错误', response)
const status = response.statusCode
/* 对响应错误做点什么 (statusCode !== 200)*/
const title = response.data ? (response.data.msg ? response.data.msg : "网络异常!" ): "网络异常!"
uni.showToast({
icon: 'none',
title,
});
return Promise.reject(title)
})
export {
http
}
@api/index.js
import { http } from '@/config/request.js'
// 列表
export const getList = (params) => {
return http.get('/test/list',{ params})
}
// 新增
export const add = (data) => {
return http.post('/test/add',data)
}
// 删除
export const del = (params) => {
return http.delete(`/test/del/${params}`)
}
方法二:uni.request
拦截器官网 uni.addInterceptor()
http封装
import {
urlFormat
} from '@/common/index.js'
// 拦截器配置
const httpInterceptor = {
// 拦截前触发
invoke(options) {
uni.showLoading({
mask: true
})
options.url = urlFormat(options.url)
options.timeout = 10000
options.header = {
...options.header,
}
const token = uni.getStorageSync('token')
if (token) {
options.header['m-token'] = token
}
},
}
// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor)
class Request {
request(options) {
return new Promise((resolve, reject) => {
uni.request({
...options,
// 响应成功
success(response) {
uni.hideLoading()
const status = response.statusCode
if (status === 200) {
if (response.data.code === 200) {
resolve(response.data)
} else if (response.data.code === 401) {
// 清空缓存
uni.clearStorageSync()
//跳转到登录页面
const index = getCurrentPages().length - 1
var route = getCurrentPages()[index].$page.fullPath
uni.reLaunch({
url: `/pages/login/login?route=${route}`,
});
// uni.showToast({
// icon: 'none',
// title: '认证失败!'
// });
reject('请重新登录!');
} else if (response.data.code === 500) {
uni.showToast({
icon: 'none',
title: '服务器内部错误!'
});
reject('服务器内部错误!');
} else {
uni.showToast({
icon: 'none',
title: response.data.msg || '请求错误!',
});
reject(response.data.msg || '请求错误!');
}
} else {
uni.showToast({
icon: 'none',
title: '未知错误!',
});
reject("未知错误!")
}
},
// 响应失败
fail(response) {
uni.hideLoading()
// console.log('响应错误', response)
const status = response.statusCode
/* 对响应错误做点什么 (statusCode !== 200)*/
const title = response.data ? (response.data.msg ? response.data.msg :
"网络异常!") : "网络异常!"
uni.showToast({
icon: 'none',
title,
});
reject(title)
},
})
})
}
get(url, data) {
return this.request({
method: 'GET',
url,
data,
})
}
post(url, data) {
return this.request({
method: 'POST',
url,
data,
})
}
put(url, data) {
return this.request({
method: 'PUT',
url,
data,
})
}
delete(url, data) {
return this.request({
method: 'DELETE',
url,
data,
})
}
upload(url, filePath, formData) {
return new Promise((reslove, reject) => {
uni.uploadFile({
url,
filePath,
name: 'file', // 必填
formData,
// header: {},
success: (uploadFileRes) => {
uni.hideLoading()
reslove(uploadFileRes.data)
},
fail: (e) => {
uni.hideLoading()
reject(e)
},
});
})
}
}
const http = new Request()
export default http
使用
import http from '@/http/request.js';
// 获取类别列表
export const test= (data) => {
return http.get('/api',data)
}