小程序中封装api请求

小程序中封装api请求,第1张

一、在pages同级创建request文件夹 在此文件夹下创建一个index.js文件夹 在此文件夹内写入封装的api

const request = (method,url,params) =>{               // method (请求方式)     url (请求的路径)   params (请求的参数)

  return new Promise((resolve,reject) =>{             // 创建一个promise函数 

    let baseUrl = "公共url"

    uni.showLoading({                                               // 添加加载动画

        title: '加载中'

    })

    uni.request({                                                         // 发送请求

        url: baseUrl + url,                                             // url 形参就是传入的地址

        data: params? params:'',                               // 传入的请求参数

        method: method,                                            // 传入的请求方式

        success: res =>{                                           // 成功的函数

          resolve(res.data)

          uni.hideLoading()

        },

        fail: err =>{                                                 // 失败的函数

          reject(err) 

          uni.hideLoading()

        }

    })

  })

}

const api = {

  get: (url,params) =>request("GET",url,params),

  post: (url,params) =>request("POST",url,params)

}

export default api                                                // 抛出接口

二、在request 文件目录下 创建一个 home文件夹  在home 文件夹内新建index.js文件

// 所有的首页的请求 ,都放在这里维护

import api from '../index.js'

export const get = params => api.get('路径',params)              // get请求

export const post = params => api.post('路径',params)              // post请求

三、在所需要请求数据的页面内

import  请求名  from '文件路径'

1.第一步建立http文件夹 再建立http.js

2.第二步封装具体的请求,建立api.js

3.第三步在页面调用接口:

1.小程序接口请求流程

2.域名配置:    一定要配置[https],小程序上配置的域名必须是域名备案的。但如果是没有备案的接口,需要在小程序里勾选不检验合法域名,即下图所示(这个选项在项目设置里面)

3.打开微信开发者工具,打开你的项目,点开详情。确认一下域名是否一一匹对。不然会编译失败

4.在你的项目中创建一个文件夹http,在里面在创建一个env.js,api.js和request.js(可以自己定义)

5.在request.js里,二次封装wx.request

如下所示


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/7924407.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存