微信小程序基于Promise封装发起网络请求

1.创建一个request.js

javascript 复制代码
// 相当于域名
const baseURL = '***************';
// 暴露一个request函数
export function request(parms) {
  // 路径拼接
  const url = baseURL + parms.url;
  // 请求体,默认为{}
  const data = parms.data || {};
  // 请求方式,默认为GET
  const method = parms.method || "GET";
  //请求头,默认为{  'content-type': 'application/json'}
  const header = parms.header || {
    'content-type': 'application/json'
  };
  // 返回Promise构造函数,里面是一个函数,函数里面有两个参数,这两个参数是Promise内部封装的方法,执行resolve()这样就行了
  return new Promise((resolve, reject) => {
    // 采用es6语法中,key-value一致就可省略value
    wx.request({
      url,
      data,
      method,
      header,
      success: (res => {
        // 返回成功结果
        resolve(res)
      }),
      fail: (err => {
        // 返回失败结果
        reject(err)
      })
    })

  })
}

2.导入

javascript 复制代码
import {  request} from "../../utils/request"

3.使用

javascript 复制代码
    request({
      url: "/nav/get",
      method: 'POST'
    }).then(res => {
//捕获成功
console.log(res);
    }).catch(err => {
//捕获失败
      console.log(err);
    })

4.展示

相关推荐
恋猫de小郭8 分钟前
Android 宣布 Runtime 编译速度史诗级提升:在编译时间上优化了 18%
android·前端·flutter
莓莓儿~10 分钟前
Next.js 14 App Router数据获取开发手册
开发语言·前端·javascript
文心快码BaiduComate16 分钟前
AI Coding老跑偏?用Comate Rules功能,少走十年弯路!
前端·架构·前端框架
PineappleCoder22 分钟前
WebP/AVIF 有多香?比 JPEG 小 30%,<picture>标签完美解决兼容性
前端·面试·性能优化
Kaze_story23 分钟前
Vue第五章(1):scoped、组件通信
前端·javascript·vue.js
hayzone24 分钟前
Git 配置与使用全攻略(含工作流对比与 AI 协作)
前端
匠心网络科技25 分钟前
前端框架-Vue为何开发更高效?
前端·javascript·vue.js·前端框架
大风起兮云飞扬丶27 分钟前
react大列表更新时优化
前端·react.js·前端框架
0思必得029 分钟前
[Web自动化] HTML5常见新增标签
前端·python·自动化·html5·web自动化
Alair‎29 分钟前
103React数据处理
开发语言·前端·javascript