最近在用uni-app写app,开发体验还行吧,就是有点不方便,npm安装UI库什么的还要配置一下,但是比起微信小程序的开发体验还是赢了太多😀。
在开发过程当中,我发现发起请求用的uni.request有点原始,没有拦截器,没有配置覆盖,统一封装api有一定难度,也不能说是难度,就是每个api函数里面写个uni.request有点难顶,所以昨天下午基于axios使用方法反推封装了一下,做个记录。
仓库地址:代码仓库
实现
实现了create,拦截器,基本满足我目前使用需求。create函数创建请求实例,将传参的config跟默认config融合赋给实例就行,拦截器的实现也不是很难理解,这个就像洋葱模型,在调用use的时候,相当于添加中间件,每次发起请求的时候,每个中间件可以获取到config并修改,并传递下去,传递给最终执行的请求。在大致实现了之后,发现这个其实跟uni.request耦合度不是很高,最终的请求可以是任何请求,可以很轻松的改成封装ajax,fetch之类的请求 。
实现思路及过程就不写了,挺麻烦的,现在事情挺多,以后有空了再写,摸了😏。
使用
import导入request里面的index.js就行了,其实index.js就是在创建使用了,跟axios使用方法是一摸一样的,create里面的是config,这里到时候会覆盖到uni.request
1.编写配置
import service from './service.js'
import store from '@/store'
import { navigator,showToast } from '@/utils/mount.js'
import Vue from 'vue'
const request = service.create({
baseURL:'',
timeout: 30000
})
// console.log(request)
// console.log(request.interceptors)
request.interceptors.request.use(config=>{
config.headers.Authorization = 'Bearer ' + store.getters.token
return config
},error=>{
return error
})
request.interceptors.response.use(res=>{
if(res.data.code !== 0){
switch(res.data.code){
case 401:
store.dispatch('user/logout')
navigator.replaceAll('/pages/login/index')
showToast('登录失效,请重新登录')
break;
default:
showToast(res.data.message || res.data)
}
return Promise.reject(new Error(res.data.message || 'Error'))
}
return res.data
},error=>{
return Promise.reject(error)
})
export default request
2.统一配置api
注意,由于uni.request机制,这里并不区分params,data,统一传入data即可,uni.request会根据请求方法自动分辨应该是url传参还是请求体,get是url传参,其他一般都是放在请求体。
api/user.js:
import request from '@/utils/request'
// 登录
export function login(data){
return request({
url: '/api/user/login',
method: 'GET',
data
})
}
// 注册
export function register (data) {
return request({
url: '/api/user/register',
method: 'POST',
data
})
}
api/index.js
import * as user from './user.js'
export {
user
}
/main.js
import * as api from '@/api/index.js'
Vue.prototype.$api = api
3.然后就可以在页面中调用了
this.$api.user.login(this.form).then(res=>{
//操作
})