uni-app开发小程序封装API接口请求

直接上代码

一、建立一个https.js文件(接口地址根据自己的地址填写)

// 区分开发环境和生产环境  接口地址
let baseUrl;

if (process.env.NODE_ENV === 'development') {
 baseUrl = 'xxxxxxxxxxx'    // 开发环境
} else {
 baseUrl = 'xxxxxxxxxxx'    // 生产环境
}

export function https(config) {
 //显示loading
 wx.showLoading({
     title: '加载中...'
 }); 
 //设置请求头
 config.header = {
     'content-type': 'application/json',
 };
 //检查缓存中有没有token
 var token = wx.getStorageSync('token');
 if (token != '') {
     header.Authorization = token
 }   
 config.url = baseUrl + config.url;   // 请求地址
 let promise = new Promise(function(resolve, reject) {
     uni.request(config).then(res => {
         wx.hideLoading()      //隐藏loading
         if (res[0]) {
             uni.showToast({
                 title: "数据获取失败",
                 icon: "none",
                 duration: 1500
             })
             resolve(false);
         } else {
             let data = res[1].data; 
             if (data.code == 1) {
                 resolve(data);
             } else {
                 resolve(data);
             }
         }
     }).catch(error => {
         wx.hideLoading()      //隐藏loading
         reject(error);
     })
 })
 return promise
}

二、再建立一个api.js文件,引入刚刚封装好的https.js文件。api是作为一个接口集

import {https}  from '@/components/api/https.js';    // 引入刚刚封装好的https
    
class api{
    async getList(data) {
        const res = await https({
            method: "get", // 请求方式
            url: '/getJoke', // 请求url
            data: data,// 参数
        })
        return res
    }
    // 下面可以接着写API接口集
    // 接口二
    // 接口三
    // ......
}

export default new api()

三、main.js全局引用刚刚封装好的API接口集,绑定到原型

import api from './components/api/api.js'
Vue.prototype.$dy_api = api

四、页面调用(没有参数可不写)

getData(){      
    this.$dy_api.getList({page:"1",count:"2",type:"video"}).then((res)=>{
    console.log(res)
  })    
}     

请求结果图

ycl.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容