uni-app使用fly封装网络请求接口
介绍
本文采用uni-app框架开发，使用flyio库封装请求。
小程序里 wx.request 回调套回调，登录拿 code、带 token、统一弹错误，很快写成一团。flyio 接口接近 axios，拦截器能把公共逻辑抽出去。下面是我当时项目的拆法。
安装方式
项目根目录执行（HBuilderX 创建的 uni-app 一般也有 package.json）：
npm install --save flyio
引入方式
新建api.js文件，编写以下内容
微信小程序端要用 dist/npm/wx 这条路径，直接 require('flyio') 有时会打到 H5 实现：
var Fly = require("flyio/dist/npm/wx")
var fly = new Fly;
配置方式
baseURL 换成你自己的域名；开发阶段记得在微信后台配合法 request 域名，否则真机必挂。
// 配置请求根域名
fly.config.baseURL = "http://whisper.wezoz.com"
// 配置响应拦截器
fly.interceptors.response.use(
(response) => {
// 如果请求报错
if (response.data.code != 10000) {
uni.showModal({
title:'温馨提示',
content:response.data.data
})
}else{
//只将请求结果的data字段返回
return response.data.data
}
},
(err) => {
//发生网络错误后会走到这里
return Promise.resolve("网络请求：ERROR！")
}
)
// 配置请求拦截器
fly.interceptors.request.use((request) => {
request.headers["token"] = uni.getStorageSync('token');
return request;
})
响应拦截里用 code != 10000 判业务失败，要和后端约定一致；网络错误分支我当年直接 resolve 了字符串，调用方不好区分成功失败，生产环境建议 reject 或统一返回 { ok: false }。请求拦截从 uni.getStorageSync 取 token，登录前发请求会是空 token，登录接口本身别走这套校验。
同步封装微信登录
wx.login 是异步的，包成 Promise 才能在 async/await 里顺序写「先 code、再换 token」：
async function wxLogin() {
return await new Promise((resolve, reject) => {
wx.login({
success(res) {
if (res.code) {
resolve(res.code)
}
}
})
})
}
写一个接口如login
// 登录
export const login = async (params) => {
console.log('开始登录...')
let code = await wxLogin();
let res = await fly.get('/user/login', {code: code})
uni.setStorageSync('token', res.token)
uni.setStorageSync('openid', res.openid)
}
封装普通请求
业务接口按资源拆文件导出即可，页面里只调 this.$api.xxx：
export const updateUserInfo = (params) => {
return fly.get('/user/update', params)
}
引入方式
在App.vue 或者main.js添加以下代码
挂到 Vue.prototype.$api 后，任意页面都能 this.$api.login()，不用每个页面 import。
import * as API from './static/utils/api'
Vue.prototype.$api = API
调用方式
test.vue
页面 onLoad 或按钮里直接调；登录建议放 App.vue 的 onLaunch，避免每个页重复登录：
this.$api.login()
小结：网络层就三块——实例 + 拦截器 + 按接口导出。后面换域名、改 token 字段，只动 api.js 一处。
版权声明: 本文首发于 指尖魔法屋-uni-app使用fly封装网络请求接口（https://blog.thinkmoon.cn/post/306-wechat-miniprogram-guide-network-api/） 转载或引用必须申明原指尖魔法屋来源及源地址！