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

 继续浏览关于 的文章

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

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

精选评论

  1. 猎人
    猎人 回复

    Windows 7Chrome 80.0.3987.163

    请问,微信小程序第一次授权登录后,所有请求获取不到uni.getStorageSync('token')的值,该怎么解决呢(虽然刷新重加加载一次就正常了,但我不可能让用户退出重新进入一次吧)

    1. 醉月思

      两种方案维护token

      每次请求校验token是否在有效期内,没有则获取token再请求。请求token失效或不存在,后端统一返回错误码,接收到该错误码则同步获取token,发起二次请求
    2. 猎人
      猎人 回复

      Windows 7Chrome 80.0.3987.163

      呃,我试了下,用
      fly.config.headers = {

      "openid": uni.getStorageSync("openid")

      }

      不行,改成
      fly.interceptors.request.use((request) => {

      request.headers["token"] = uni.getStorageSync('token'); return request;

      })
      就可以了

      1. 醉月思

        还是要维护token的,直接请求不推荐