uni-app使用fly封装网络请求接口
介绍
本文采用uni-app框架开发，使用flyio库封装请求。
安装方式
npm install --save flyio
引入方式
新建api.js文件，编写以下内容
var Fly = require("flyio/dist/npm/wx")
var fly = new Fly;
配置方式
// 配置请求根域名
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;
})
同步封装微信登录
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)
}
封装普通请求
export const updateUserInfo = (params) => {
return fly.get('/user/update', params)
}
引入方式
在App.vue 或者main.js添加以下代码
import * as API from './static/utils/api'
Vue.prototype.$api = API
调用方式
test.vue
this.$api.login()
版权声明: 本文首发于 指尖魔法屋-uni-app使用fly封装网络请求接口（https://blog.thinkmoon.cn/post/306_uni-app%E4%BD%BF%E7%94%A8fly%E5%B0%81%E8%A3%85%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E6%8E%A5%E5%8F%A3/） 转载或引用必须申明原指尖魔法屋来源及源地址！