前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原生微信小程序flyio封装多baseURL配置请求,如同axios一样非常爽利的使用api

原生微信小程序flyio封装多baseURL配置请求,如同axios一样非常爽利的使用api

作者头像
全栈程序员站长
发布2022-10-04 13:26:36
1.2K0
发布2022-10-04 13:26:36
举报

大家好,又见面了,我是你们的朋友全栈君。

1.下载 引入 flyio 基于 promise Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。 fly下载地址

2.request.js 配置fly 请求体

代码语言:javascript
复制
// import Fly from 'flyio/dist/npm/wx';
const Fly = require("flyio.js");
const fly = new Fly();

//设置超时
fly.config.timeout = 20000;

// 获取白名单
import whiteList from './whiteList';

//添加请求拦截器
fly.interceptors.request.use((request) => {
  // console.log('进入fly-request', request);
  wx.showLoading({
    'title': '加载中',
    'mask': true
  });
  // 不显示加载页面的接口
  if (whiteList.loading.indexOf(request.url) === -1) {
    // 隐藏loading遮罩
    wx.hideLoading();
  }
  // 请求资源服务器时,不添加token
  if (whiteList.nullHeaderToken.indexOf(request.url) !== -1) {
    request.timeout = 30000; // 请求超时
    request.headers = {
      'content-type': 'application/json',
      'X-Tag': 'flyio'
    };
    console.log('nullHeaderToken()')
    return request;
  }
  fly.lock();//锁住请求
  // 延迟发请求 等 getStorageSync 存储
  if (wx.getStorageSync('Authorization')) {
    // 给所有请求添加自定义header
    request.timeout = 30000;
    request.headers = {
      'content-type': 'application/json',
      'X-Tag': 'flyio',
      'Authorization': 'Bearer ' + wx.getStorageSync('Authorization')
    };
    fly.unlock();//解锁请求
    return request;
  } else {
    console.log('没有token跳转登录');
    setTimeout(() => {
      wx.redirectTo({
        url: '../login/login'
      });
    }, 300)
  }
}, (error, promise) => {
  // Do something with request error
  console.log(error); // for debug
  promise.reject(error)
});

//添加响应拦截器,响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
  (response) => {
    wx.hideLoading();
    console.log('interceptors数据', response.data);
    //只将请求结果的data字段返回
    return response.data
  },
  (err, promise) => {
    wx.hideLoading();
    let msg = '';
    if (err.status === 0) {
      msg = '网络连接异常'
    } else if (err.status === 1) {
      msg = '网络连接超时'
    } else if (err.status === 401) {
      msg = '用户未登录'
    } else {
      if (err.response.data.message) {
        msg = err.response.data.message
      } else {
        msg = '请求数据失败,请稍后再试'
      }
    }
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 2000
    });
    setTimeout(() => {
      console.log('fly.interceptors.err-toLogin')
      wx.redirectTo({
        url: '../login/login'
      });
    }, 500)
    return promise.resolve(err)
  }
);
// Vue.prototype.$http=fly //将fly实例挂在vue原型上

export default fly

3. baseUrlConfig.js

代码语言:javascript
复制
/**
 *  定义各个API的 baseURL
 */
const baseURL = {
  'UAA': 'https://xxx1.com/uaa', // uaa 获取token
  'IDC': 'http://xxx2:8580/idc-admin', // idc 相关业务
  'IDCtest': 'http://10.2.5.163:8790' // 本地开发
};
export default baseURL;

4.whiteList.js 白名单

代码语言:javascript
复制
export default {
  // 不显示加载提示
  loading: [
    '/route/list'
  ],
  // 不重定向白名单
  route: [
    '/login'
  ],
  // 不带token的url
  nullHeaderToken: [
    '/user/weChatLogin'
  ]
}

5.业务api 获取token api

注意1 是 使用 fly.request

注意2 fly请求参数 是放置在 body 上 而不是 data:data

注意3 要使用另外 baseUrl 只需要写上对应的 baseURL: baseURL.UAA 即可

代码语言:javascript
复制
import fly from '../../request.js'
import baseURL from '../../baseUrlConfig.js'

// 图表 表11 FleetList 查询车队列表
export function getReport11FleetList(query) {
  return fly.request({
    baseURL: baseURL.IDC,
    url: '/report11/getReport11FleetList?fleetName=' + query,
    method: 'get'
  })
}

// 图表 表11 FleetName 查询
export function getReport11ListByFleetName(data) {
  return fly.request({
    baseURL: baseURL.IDC,
    url: '/report11/getReport11ListByFleetName',
    method: 'post',
    body: data
  })
}

// uaa登录
export function userWeChatLogin(data) {
  // console.log('userWeChatLogin()', data)
  return fly.request({
    baseURL: baseURL.UAA,
    url: '/user/weChatLogin',
    method: 'post',
    body: data
  })
}

// 单个api 针对的相应 各项配置
// 获取 token 登录 
export function userLogin(data) {
  return fly.request({
    headers: {
      'Authorization': 'Basic b3A6b3A=',
    }, // headers 配置
    timeout: '30000', // 超时时间
    baseURL: baseURL.IDC, // 请求后端地址
    url: '/auth/form', // 请求api
    method: 'post', // 请求格式
    body: data // 请求参数
  })
}

6. 微信小程序里使用api 举例

代码语言:javascript
复制
import * as ChartsAPI from '../../../../wxapi/api/charts/charts.js'
// 根据自己的 文件放置 配置自己的文件引用路径
userLogin: function() {
       wx.showLoading({
          title: '加载中',
       })
        const toParams = {
          "username": that.data.inputValueUsername,
          "password": that.data.inputValuePwd,
          "grantType": "password",
          "clientId": "devops",
          "clientSecret": "devops"
        }
        
        ChartsAPI.userWeChatLogin(toParams).then(res => {
          if (res.data && res.data.access_token) {
            wx.showToast({
              title: "登录成功",
              icon: "success",
              duration: 1500
            })
            let resToken = res.data.access_token
            wx.setStorageSync('Authorization', resToken)
            setTimeout(() => {
              wx.redirectTo({
                url: '../index/index'
              })
            }, 1500)      
          }
          wx.hideLoading()
        }).catch(err => {
          wx.hideLoading()
          wx.showToast({
            title: "用户或密码错误",
            icon: "none",
            duration: 1500
          })
          console.log('error', err)
        })

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月6日 下,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档