使用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)
})
成功
Snipaste_2022-10-06_13-32-03.png
