uniapp 微信小程序 使用flyio封装请求

1、npm init -y 在项目根目录初始化package.json文件

2、npm install flyio --save 下载安装flyio包

3、根目录下新建 utils 目录，并新建request.js文件

// 引入fly
import Fly from 'flyio/dist/npm/wx'
let fly = new Fly()

// const host = process.env.NODE_ENV === "development" ? "模拟地址" : "真实地址"
// 设置超时
fly.config.timeout = 30000
// 设置请求基地址
fly.config.baseURL = 'https://api-hmugo-web.itheima.net'
// 添加请求拦截器
fly.interceptors.request.use(request=>{
    // let token = uni.getStorageSync('aliToken')
    // if(token) {
    //  request.headers['token'] = token
    // }
    uni.showLoading({
        mask: true,
        title:"加载中"
    })
    return request
},function(error){
    return Promise.reject(error)
})

// 添加响应拦截器
fly.interceptors.response.use(res=>{
    
    uni.hideLoading()
    return res
},error => {

    uni.hideLoading()
    return Promise.reject(error)
})

export default fly

4、根目录下新建api目录，并新建项目需要使用的发起请求的页面js文件如 home.js my.js等

// home.js中引入fly
import fly from '@/utils/request.js'
// 导出添加的api接口方法
export function getSwiperList(){
    return fly.get('/api/public/v1/home/swiperdata')
}

5、api目录下新建index.js 文件

// 导入业务页面所有接口方法
import * as home from './home.js'
import * as my from './my.js'
import Vue from 'vue'

export const STATUS_OK = '000'
const api = {
    STATUS_OK: STATUS_OK,
    ...home,
    ...my
}
// vue原型挂载api请求对象
Vue.prototype.$api = api
//导出请求对象 api
export default api

6、main.js 中引入api

import './api/index.js'

7、页面中使用

 this.$api.getSwiperList().then(res=> {
              console.log(res, 16)
          })

成功