介绍

本文采用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()

版权声明: （https://blog.thinkmoon.cn/post/306_uni-appfly）本文首发于指尖魔法屋-uni-app使用fly封装网络请求接口转载或引用必须申明原指尖魔法屋来源及源地址！