前言
最近这两天在学习uni-app的开发，在准备阶段本来想使用原来封装的一个axios网络请求的工具的，但是查看兼容性，发现axios只能在node和浏览器中运行，而我本次想开发的是运行在微信小程序和安卓上的，所以就抛弃了原来的axios，但是多少可以借鉴一点他的配置模式
吐槽
这里我真的要吐槽一下这个HBuilder X开发工具，生态确实不强大，配置起来确实有点麻烦，关键插件还不是那么多，还有就是网上配置uni.request(),这些真的在水文章，关键是文章还是一模一样的搬运，一个配置能给配置得很复杂，也是有点不理解，一个接口请求翻转，还需要再业务层直接传后面的配置，这样代码看起来真的很烦，真的就是大自然的搬运工啊。到处抄袭了然后发表。
开始
首先介绍一下HBuilder X中的一款插件，luch-request，是基于Promise开发的跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力，github地址
使用
NPM下载
npm i luch-request -S
引用
首先在项目文件夹下创建一个luch-request.js，这个文件具体放的位置看个人项目，有些放入utils文件夹下，有些放入common文件夹，有些直接在src编写一个api文件夹，然后在该文件夹下创建这个文件，看个人习惯以及项目结构。
luch-request.js
// 引入luch-request
import Request from 'luch-request'
// 配置的接口访问地址
import config from '@/api/config.js'
// 引入http
const http = new Request();
// api接口暴露对象
const api = new Request();
// 引入config，配置请求地址
const {
api_base_url
} = config
// 全局配置
http.setConfig((config) => {
config.baseURL = api_base_url
config.timeout = 60 * 1000
// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
config.withCredentials = true
config.dataType = 'json'
config.header = {
'X-Requested-With': 'XMLHttpRequest',
Accept: 'application/json',
'Content-Type': 'application/json; charset=UTF-8',
}
config.responseType = 'json'
return config
})
// 请求拦截器
http.interceptors.request.use((config) => {
config.header = {
...config.header
}
console.log('config', config)
return config
}, (config) => {
return Promise.reject(config)
})
// 响应拦截器
http.interceptors.response.use((response) => {
let data = response.data
let status = response.status
console.log('response.data', response.data)
if (data.code === 200) {
return Promise.resolve(data)
} else if (data.code === 404) {
return Promise.reject(response)
}
}, response => {
console.log('response', response)
return Promise.reject(response)
})
// 请求方式的组合
let requestMethod = ['get', 'post']
// 遍历请求方式
requestMethod.forEach(method => {
api[method] = function(url, data, config) {
return new Promise(function(resolve, reject) {
http.get(url, data, config).then(response => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}
})
// 暴露
export default api
config.js
// 接口地址
let api_base_url = ''
if (process.env.NODE_ENV === 'development') {
// 开发地址
api_base_url = 'http://localhost:3000'
} else if (process.env.NODE_ENV === 'production') {
// 生产模式的地址
api_base_url = 'https://xxx'
}
// 接口地址统一暴露
export default {
api_base_url
}
user.js
// 引入接口
import api from '@/common/luch-request.js'
// 获取歌单分类
export const getPlaylistCatlist = () => api.get(`/playlist/catlist`, {})
项目中使用
<template>
<view class="content">
<image class="logo" src="/static/images/logo.png"></image>
<view>
<text class="title">{{ result }}</text>
</view>
</view>
</template>
<script>
import { getPlaylistCatlist } from '../../api/service/user.js';
export default {
data() {
return {
title: 'Hello',
result: {},
};
},
onLoad() {
this.getPlaylistCatlist();
},
methods: {
// 获取用户歌单
getPlaylistCatlist() {
getPlaylistCatlist().then(res => {
if (res.code === 200) {
this.result = res.categories;
console.log('res', this.result);
}
});
}
}
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 200rpx auto 50rpx auto;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
效果
总结
当然这个只是目前的一种简单的配置，如果大家有很好的，很完善的配置可以一起探讨。
