本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

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()

推广

 继续浏览关于 vuejs 的文章

 本文最后更新于:2019/11/22 15:55:32,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > uni-app使用fly封装网络请求接口