微信小程序网络请求封装promise_微信小程序 wx.login封装成promise-CSDN博客

本文链接：https://blog.csdn.net/weixin_39441872/article/details/109643299

本文介绍了一种基于Promise封装网络请求的方法，包括配置主域名、实现网络请求的Promise化、统一管理API接口以及如何在页面中调用这些接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网络请求封装promise

(1)封装配置文件

global.js
// 定义主域名
const  url = "http://localhost:3000";

export default url;

(2)封装网络请求promise

http.js文件

// 封装网络请求，变成promise形式
import  url from  "./global"

const http = (options={}) => {
  /*
    options = {
      url:"/login", 
      data:{},
      method:"",
      header
    }
  */
  return new Promise((resolve, reject) => {
    wx.request({
      // http://localhost:3000/login
      url: url + options.url, //  服务器地址
      data:options.data || {},
      header:options.header ||  {
        "content-type": "application/json"
      },
      timeout: 30000, // 请求超时时间，  默认是60秒
      method: options.method  || "get", //post  put  delete
      success(res) {
        resolve(res)
      },
      fail(err){
        reject(err)
      }
    })

  })

}


export default http;

(3)统一管理api接口

api.js文件

// 统一管理接口文件
import  http  from  "./http"
// 1.获取商品
const  _getProducts = (data={})=>{
  var options = {
    url:"/products",
    data
  }
  return  http(options);
}

// 2.执行登录
const _doLogin = (data={})=>{
  var options = {
    url:"/login",
    method:"post",
    data,
  }
  return http(options)
}


export  default {
  _getProducts,_doLogin
}

(4)页面使用api

import  api  from "../../utils/api"
Page({
	async _getInfo() {
    // let options = {
    //   url: "/products",
    //   data: {
    //     username: "root"
    //   }
    // }
    // // console.log(http)
    // http(options).then(res => {
    //   console.log(res)
    // })
    // api._getProducts().then(res=>{
    //   console.log(res)
    // })

     let  res =  await api._getProducts({pass:123456});

     console.log(res)
  }
})