最近需要开始写小程序,比较了uni-app与taro框架,听取了很多朋友的建议,最终还是选择使用taro。笔者之前使用过taro,因为不是自己搭建的总体框架,所以仅限业务开发。新开发的小程序将由笔者独立搭建总体框架,遇到的问题会不定时分享出来,以供诸君参考,也希望诸君不吝赐教!!!
taro文档-网络请求
import Taro from '@tarojs/taro'
// 错误定义
const HTTP_STATUS = {
SUCCESS: 200,
CREATED: 201,
ACCEPTED: 202,
CLIENT_ERROR: 400,
AUTHENTICATE: 401,
FORBIDDEN: 403,
NOT_FOUND: 404,
SERVER_ERROR: 500,
BAD_GATEWAY: 502,
SERVICE_UNAVAILABLE: 503,
GATEWAY_TIMEOUT: 504
}
// 获取基础域名
const getBaseUrl = (url) => {
let BASE_URL = ''
if (process.env.NODE_ENV === 'development') {
if (url.includes('/api/')) {
BASE_URL = '' //填写你的请求域名
} else if (url.includes('/iatadatabase/')) {
BASE_URL = '' //填写你的请求域名
}
} else {
if (url.includes('/api/')) {
BASE_URL = '' //填写你的请求域名
} else if (url.includes('/iatadatabase/')) {
BASE_URL = '' //填写你的请求域名
}
}
return BASE_URL
}
// 拦截器
const interceptor = (chain) => {
const requestParams = chain.requestParams
return chain.proceed(requestParams).then(res =>
{
if(res.statusCode === HTTP_STATUS.NOT_FOUND){
return Promise.reject("请求资源不存在")
}else if(res.statusCode === HTTP_STATUS.BAD_GATEWAY){
return Promise.reject("服务端出现问题")
}else if(res.statusCode === HTTP_STATUS.FORBIDDEN){
return Promise.reject("无权访问")
}else if(res.statusCode === HTTP_STATUS.AUTHENTICATE){
return Promise.reject("需要鉴权")
}else{
return res.data
}
}
)
}
// 添加拦截器
Taro.addInterceptor(interceptor)
Taro.addInterceptor(Taro.interceptors.logInterceptor)
const request = ({
url,
data = {},
method = "get",
header = {}
})=>{
const BASE_URL = getBaseUrl(url)
const handleHeader = {
'content-type': 'application/json',
...header
}
return new Promise((resolve,reject)=>{
const options ={
url: `${BASE_URL}${url}`,
data,
method,
header: handleHeader
}
Taro.request({
...options,
success(result){
const {errcode, data:res, msg} = result
if(errcode !== 1){
console.log(msg)
}else{
resolve(res);
}
},
fail(e){
console.log('网络异常')
reject(e)
}
})
})
}
export default request
总体方法不是很难,注意:与axios,ajax等不同,taro会自动将请求参数转换为与content-type要求一致的数据格式,再此不需要特殊处理。关于用户授权信息等可以在header中添加,结合本地存储以及redux可以很方便的实现。