立即咨询

提交后我们会尽快与您联系

本分类最新文章

微信小程序开发网络请求解决方法

2022-05-08
6519 浏览
4 评论
闻道君
原文链接

断断续续的我又回来了，虽然没几个人看，但是呢自己总要有点仪式感。主要是最近又写了一个小程序，发现写完 vue 回头写微信小程序 简直顺畅的不得了，比我直接用 Android 切过去可真的好太多了。OK，废话停止，正文开始...

官方文档 微信小程序-网络

前提：

已在

微信公众平台

==》

开发

==》

开发管理

==》

服务器域名

request合法域名 中配置请求的基础域名。还有 uploadFile合法域名、socket合法域名 等，按照需求配置相关域名即可。多个域名用

;

(英文;) 隔开即可。

例如：请求的路径为 https://www.baidu.com/api，只需配置 https://www.baidu.com

准备：

首先 了解清楚以下：

请求url

: 微信小程序中唯一必填字段，

请求方式

：一般是 GET/POST，微信小程序默认GET

请求头

：
content-type ：请求的参数格式，微信小程序默认 ‘application/json’,常用的还有 "application/x-www-form-urlencoded" ,
Accept：接收的数据格式， 一般为'application/json'

请求参数

：根据请求头设置的参数格式写对应的参数即可，如果没有则不写

对于请求参数不理解的 可以看 HTTP请求中的参数提交 && GET和POST两种基本请求方法的区别
)

开始使用：

相关 API 使用的聚合数据 免费API, 需要可自己注册账号获取即可 https://www.juhe.cn

    let city = '上海';
    let key = '6483ffe27e1425d240365e190a7993dc';

     wx.request({
      url:'https://apis.juhe.cn/simpleWeather/querycity='+city+'&key='+key,
      method:'GET',//请求方式
      header:{
        'content-type': 'application/x-www-form-urlencoded'//请求头 根据项目配置
      },
      success(res){
        console.log('success =====',res)
      },
      fail(res){
        console.log('fail =====',res)
      },
      complete(res){
        console.log('complete =====',res)
      }
    })

     var params = {
         city: '上海',
         key: '6483ffe27e1425d240365e190a7993dc' }

     wx.request({
      url: 'https://apis.juhe.cn/simpleWeather/query',
      method:'POST',//请求方式
      data:params,//参数
      header:{
        'content-type': 'application/x-www-form-urlencoded'//请求头 根据项目配置
      },
      success(res){
        console.log('success =====',res)
      },
      fail(res){
        console.log('fail =====',res)
      },
      complete(res){
        console.log('complete =====',res)
      }
    })

无论使用哪种方式都可以请求到数据：


< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-92b46918dc8b173de30c084eb0961fcf.png">
result.png

只要和确定好请求参数，请求头，请求方式，就可以正常获取到数据。

BUT 网络请求是异步的，也就是你不能把获取到的数据 return 给调用者，需要通过回调把数据传回给调用者。（PS：如果你非要每次请求都单独写一个请求方法，完全可以在异步回调中直接处理，但是 应该没有这样的吧 会把自己累死的）

封装：

1、封装网络请求，要清楚哪些是可变的，哪些是不变的。
通常来说 header 不会每次都变，当然 也有可能会变化 （万一后台就是玩呢，同一个项目不同的请求非要搞不同的 header 呢 ，嗯 前端的脾气就是这样被磨没的。所以针对这种情况也写好，整的死死的，来啥样的 照收不误。但是代码还是要尽量保持整洁 毕竟维护的还是我们自己），参数/请求地址url/请求方法，肯定是会变的。

2、对请求结果的处理
通常会把成功获取数据的交给调用者自己处理，如果失败 还是统一处理比较好，毕竟每次调用都处理失败 也是挺多冗余代码的。


var defaultHeader = {
  'Accept': 'application/json',
  'content-type': 'application/x-www-form-urlencoded',
}

 request:function(url,method,header,data,successCB,failCB){
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    wx.request({
      url: rootUrl + url,
      method:method,
      data:datadata:'',
      header:headerheader: defaultHeader,
      success(res){
        if(res.statusCode==200){
          // 处理数据 不需要返回所有数据
         if(successCB && typeof successCB == "function"){
              successCB(res.data)
          }
        }else{
          // 服务器错误 此时给出提示 且 不允许用户下一步操作
          wx.showModal({
            title:'温馨提示',
            content:'出错了，请稍后重试',
            showCancel:false,
          })
        }
      },
      fail(res){
        // 提示报错信息
        wx.showModal({
          showCancel: false,
          content: res.errMsg
        });
        // 调用者处理,也可不处理
        if(failCB && typeof failCB == "function"){
          failCB(res)
        }
      },
      complete(res){
        // 无论成功失败 加载结束 加载框消失
        wx.ShopfadeLoading({
          complete: (res) => {
            // 这里处理下 否则真机会报错 
            //in promise) MiniProgramError {"errMsg":"ShopfadeLoading:fail:toast can't be found"}
            console.log('ShopfadeLoading',res)
          },
        })
      }
    })
  }

主要的请求写好了，这样的话这个请求方法的参数也太多了，所以，多写个方法简化下

 get:function(url,data, successCB, failCB){
    return request(url,data,'GET',data, successCB, failCB)
  },

  post:function(url,data, successCB, failCB){
   return request(url,data,'POST',data, successCB, failCB)
  },

调用

// =========GET============
    let city = '上海';
    let key = '6483ffe27e1425d240365e190a7993dc';

   tShopfas.get('simpleWeather/querycity='+city+'&key='+key,null,function(res){
      console.log('success===',res)
    }, function(err){
      console.log('fail===', err)
    });

// =========POST============
    let param = {
        city:'上海',
        key:'6483ffe27e1425d240365e190a7993dc'
     }

   tShopfas.post('simpleWeather/query',param,function(res){
      console.log('success===',res)
    }, function(err){
      console.log('fail===', err)
    });

使用Promise封装：

个人认为，使用 Promise 最大的好处就是可以

链式调用！

&&

回调方法！

链式调用让代码简洁、易读,尤其是代码的请求存在前后关系的时候，

 promiseRequest:function(url,data,method,header){

    var defaultHeader = {
      'Accept': 'application/json',
      'content-type': 'application/x-www-form-urlencoded',
    }

    return new Promise(function(resolve,reject){
      wx.request({
        url: rootUrl + url,
        method: method,
        data: data  data : '',
        header: headerheader:defaultHeader,
        success(res) {
          if (res.statusCode == 200) {
            // 处理数据 不需要返回所有数据
            resolve(res.data)
          } else {
            // 服务器错误 此时给出提示 且 不允许用户下一步操作
            wx.showModal({
              title: '温馨提示',
              content: '出错了，请稍后重试',
              showCancel: false,
            })
          }
        },
        fail(res) {
          // 提示报错信息
          wx.showModal({
            showCancel: false,
            content: res.errMsg
          });

          let errorMsg = errorMsg(res)
          reject(errorMsg)
        
        },
        complete(res) {
          // 无论成功失败 加载结束 加载框消失
          wx.ShopfadeLoading({
            complete: (res) => {
              // 这里处理下 否则真机会报错 
              //in promise) MiniProgramError {"errMsg":"ShopfadeLoading:fail:toast can't be found"}
              console.log('ShopfadeLoading', res)
            },
          })
        }
      })
    })
  },

可以看到 和封装前最大的区别就是 成功和失败的回调。

继续写一层方便调用

 get:function(url,data){
    return tShopfas.promiseRequest(url,data,'GET',null)

  },

  post:function(url,data){
    return tShopfas.promiseRequest(url,data,'POST',null)
  },

调用

get('simpleWeather/querycity='+city+'&key='+key,null).then(res=>{
      console.log('success get===',res)
    }).catch(error=>{
      console.log('error get===',error)

    })

post('simpleWeather/querycity='+city+'&key='+key,param).then(res=>{
      console.log('success get===',res)
    }).catch(error=>{
      console.log('error get===',error)

    })

至此 已完成微信小程序网络请求的基本使用和封装。

但是 其实还有一个隐藏的小问题，通常一个页面会调用多个接口，在第一个接口返回服务器问题的时候，应该取消其他的网络请求，目前还没找到解决方案，希望了解的朋友可以说下，先谢了

最后惯例给自己一句话：

好好地生活和工作很重要，但关照自己的内心更重要
如果心太疲惫 不防换个让心舒服的环境

****更多行业产品开发方案，请关注 加速度****

<以上资讯仅供参考，如需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询获取产品开发方案和报价>

小程序开发 小程序商城 微信小程序
微信客服二维码

加客服微信获取更多内容

返回文章列表