小程序请求接口（封装）

最新推荐文章于 2024-11-12 11:34:59 发布

原创最新推荐文章于 2024-11-12 11:34:59 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#http #封装 #js #小程序 #微信小程序

本文介绍了微信小程序中接口的封装方法，包括在request.js中封装公共请求头部，然后在api.js中拼接网址。同时，针对可能出现的权限问题，提供了两种解决方案：通过本地设置关闭合法域名校验，或在微信小程序官网上添加合法域名。此外，文章还强调了在小程序后台配置服务器域名的注意事项，如支持的协议、备案要求以及域名修改次数限制等。

小程序接口的封装

先建两个js:
eg:
request.js 封装公共请求头部

const request = (params) => {
  return new Promise((resolve,reject)=>{
  
    wx.showLoading({     //请求加载中的loading
      title: '加载中...', 
    })
    
    wx.request({
      url: BASE_URL + params.url,
      method: params.method || 'GET',
      header: {
        anth: 'token'
      },
      success: res=>{
        wx.showToast({
          title: '请求成功',
        })
        resolve(res.data)
      },
      fail:err=>{
        reject(err)
      }
    })
  })
}

export default request

api.js:
将request.js 引入后进行网址的拼接

import  request  from '../request'
export const getBanner = async () => {
  let data =  await request({
    url: 'small4/banner/list'
  })
  return data
}

// export {
//   getBanner
// }

在需要的页面里引入

import {getBanner} from '../../assets/api/index'
 getData(){
    getBanner().then(res=>{
      console.log(res.data)
       debugger
    })

权限问题

当遇到权限问题时不要慌张，以下有两种解决办法：

常用办法：
点开微信小程序右上角的详情------》本地设置-----》勾选不校验合法域名即可。

2.官网添加域名：
在微信小程序官网登陆-----》点开上方的介绍------》点击左侧开发-------》点击开发设置-------》在服务器域名（点击修改）------》扫描二维码添加即可。

小程序后台配置请求域名的注意事项

服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：

域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议
域名不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内可申请5次修改
多个域名之间使用英文分号链接