小程序中使用FLY框架请求接口封装

最新推荐文章于 2024-04-08 09:43:46 发布

原创最新推荐文章于 2024-04-08 09:43:46 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

该博客介绍了如何利用Fly.js库创建一个基于Promise的HTTP客户端，用于JavaScript运行时的请求转发。首先，通过下载fly.min.js或wx.js开始。然后，在request.js中导入Fly并设置请求和响应拦截器，显示加载提示并处理错误。最后，在api.ts中导入请求模块，定义获取用户信息的API。整个流程展示了如何优雅地处理网络请求和错误反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fly官网GitHub - wendux/fly: Supporting request forwarding and Promise based HTTP client for all JavaScript runtimes.

第一步：下载 fly.min.js/wx.js

第二步：建立一个request.js

import Fly from "../lib/flyio/wx";

const fly = new Fly()

fly.interceptors.request.use((request) => {
  wx.showLoading({
    title:'加载中',
    mask:true,
  })
  return request;
})

fly.interceptors.response.use((response, promise) => {
  wx.hideLoading();
    if (response.status >= 400 || response.data.resCode != "0") {
      wx.showToast({
        title: '出错了，请稍后再试试！',
      })
    }
    return promise.resolve(response.data)
  },
  (err, promise) => {
    wx.hideLoading();
    return promise.resolve()
  }
)

export default fly

第三步：api.ts

import fly from './request'

const baseURL = getApp().globalData.baseURL;
const authCenterURL = getApp().globalData.authCenterURL;

export async function getUsersByPhone(data: { code: string; phoneCode: string }) {
  const res = await fly.request({
    url: 'api/nocode/v1.0/wechat/phone/users',
    body: data,
    baseURL: baseURL,
  })
  return res.result
}