仿照axios封装请求(uni.request，ajax，fetch)

最近在用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=>{
	//操作
})