uniapp 二次封装axios步骤
uniapp中 axios的二次封装,封装请求接口uni.request封装
·
先新建一个api文件
第一步 api中新建base.js,代码如下:
let baseURL = '';
baseURL = 'https://ceshi.chaohua-sxx.cn/api/v1'; // 公共地址
module.exports = {
baseURL: baseURL,
}
第二步api中 新建http.js ,代码如下:
import {baseURL} from './base.js'; //导入接口的前缀地址 // 导出 export const https = (options) => { return new Promise((resolve, reject) => { // 开始请求 出现Loading uni.showLoading({ title: '加载中...' }); uni.request({ url: baseURL + options.url, //接口地址:前缀+方法中传入的地址 method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET” data: options.data || {}, //传递参数:传入的参数或者默认传递空集合 header: { 'content-type': 'application/json' //自定义请求头信息 }, // 请求成功 success: (res) => { //做判断,如果不为true,用uni.showToast方法提示获取数据失败) if (res.statusCode != 200) { //消息提示 uni.showToast({ title: res.data.msg || '获取数据失败', icon: 'none' }) return reject(res.data) } // 请求成功关闭Loading uni.hideLoading(); resolve(res) }, // 请求失败 fail: (err) => { console.log(err) //消息提示 uni.showToast({ title: '获取失败', icon: 'error' }) reject(err) } }) }) }
第三步api中 新建request.js,代码如下:
// 导入
import {https} from './http.js'
// 导出:
export const getSwiperApi = () => {
return https({
url: '/home/swiperdata' //放入除了公共地址baseUrl的路径
})
}
第四步 页面中 导入接口方法名,需要的位置调用api/request.js中的接口
1.导入api方法:
import {getSwiperApi} from "@/api/request.js"
data: {
swiperData: [] //数据 初始化
},
onLoad(options) {
this.getSwiper() //调用
},
getSwiper() {
//2 使用api方法
getSwiperApi().then((data) => {
console.log(data);
this.swiperData=data.message
}
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)