美文网首页微信小程序
微信小程序 封装请求接口

微信小程序 封装请求接口

作者: AAA_si | 来源:发表于2022-03-23 14:31 被阅读0次

本文共计两种封装 wx.request
不同点在于是否引入第三方依赖插件

1. util.js

const src = "https://baidu.com ";
//请求数据
const ajax = function (url, config, success, err) {
  let opt = {
    url: src + url,
    data: config.data || "",
    method: !config.method ? 'GET' : config.method.toUpperCase(),
    header: config.header || {},
    dataType: config.datatype || 'json',
    success: function (res) {
      if (res.statusCode != 200) {
        wx.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } else {
        success && success.call(this, res.data);
      }
    },
    fail: function (e) {
      fail && fail.call(this, e);
      wx.showToast({
        title: '网络错误',
        icon: 'none'
      })
    }
  }
  wx.request(opt)
}

module.exports = {
  ajax: ajax
}
在pages/index/index.js
import { ajax } from "../../utils/util.js"
...
getData:function(){
  ajax('/api/page/data?data=' + JSON.stringify({
      token: this.data.token,
      ...
  }),{
      header: {
          'Accept': 'application/x-www-form-urlencoded', // 默认值
      },
      method: "get",
  }, res => {
      this.setData({
        banners: res.data
      })
  })
}

2. util.js

const  qs= require('../static/js/qs.js');
//封装接口
let baseURL = 'http://baidu.com/';   //接口路径
let request = function (url, options = {}) {
  let myUrl = `${baseURL}${url}`;
  // 处理method,data,params=> 查询字符串
  // 如果有请求头
  // 合并对象data
  // 如果params 添加查询字符串参数
  //接口的参数
  if (options.params) {
    let urlQueryString = qs.stringify(options.params, {   //使用到qs ,先下载,后引入
      addQueryPrefix: true,
      allowDots: true,
    });
    myUrl += urlQueryString;
  }
 
  return new Promise((resolve, reject) => {
    wx.showLoading({
      title: '加载中...',
    });
    wx.request({
      method: 'get',
      url: myUrl,
      success: resolve,
      fail: reject,
      complete: wx.hideLoading,
      ...options  //直接展开
    });
  });
}
// 将这个接口暴露出去
module.exports = {
  request:request
}
在app.js中引入
const { request }=require('./utils/util.js');
//向外提供属性
globalData: {
  request
}
在pages/index/index.js

使用 async await

//解构赋值
const  { request } =getApp().globalData;
...
let swipe = await request('slides', {
   method: 'get',
   params: {
      a: 1, b: 2
   },
});

相关文章

网友评论

    本文标题:微信小程序 封装请求接口

    本文链接:https://www.haomeiwen.com/subject/etycjrtx.html