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

微信小程序 封装请求接口

作者: 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