微信小程序封装的HTTP请求示例【附升级版】

2019-11-19 11:36:11

字体：大中小

来源：转载

供稿：网友

本文实例讲述了微信小程序封装的HTTP请求。分享给大家供大家参考，具体如下：

微信小程序里自己封装了请求的函数，但几乎每个页面都要用到，所以为什么更方便的调用，再一次进行封装。

在app.js里面定义个全局对象，这样想要用到该函数，只需要在该页面的js文件里面，请求一个app实例。

废话不多说，先上代码：

//全局对象httpClienthttpClient:{  request:function(method,url,data){    //返回一个promise实例    return new Promise( (resolve,reject)=>{       wx.request({        url:url,        data:data,        mehtod:method,        success:function(res){          resolve(res)        },        fail:function(res){          reject(res);        },        complete:function(){          console.log('complete');        }      })    })  }  //get方法：用来获取数据  get:function( url ) {    return this.request('GET',url);  },  //post方法：用来更新数据  post:function( url,data) {    resturn this.request('POST',url,data);  },  //put方法  put:function(url,data){    return this.request('PUT', url, data);  },  //delete方法  delete:function(url,data){    return this.request('DELETE', url, data);  }

在需要请求的页面调用：

例如：登录页面login.js

//获取app实例,从而调用全局对象的函数var app=getApp();login:function(){  var url='http:xxxxx/login';  var data={    userName:'xxxxx',    passwd:'xxxxxx'  }  app.httpClient.post( url,data )    .then( res=>{console.log("请求成功时调用该函数")})    .catch(res=>{console.log("请求失败时调用该函数")})}//为了更好的阅读，也可以将回调函数，定义在外面//这样loginSuccess:function(){  console.log("请求成功时调用该函数")},loginFail:function(){  console.log("请求失败时调用该函数")},login:function(){  var self=this;  var url='http:xxxxx/login';  var data={    userName:'xxxxx',    passwd:'xxxxxx'  }  app.httpClient.post( url,data )    .then( res=>self.loginSuccess())    .catch(res=>self.loginFail())}

是不是简洁多了。。。。

附：升级版

上代码

// 该函数怎么写，需要跟后端人员协商返回的格式function getErrorMsgByErrorNo(error_no) { let error_msg; switch (error_no) {  case 100: error_msg = '操作失败，请稍后再试！'; break;  default: error_msg = '网络错误，请稍后再试！'; break; } return error_msg;}function handleData(res) { if (res.data.success) {  if (typeof (res.data.body) === 'string') {   return [];  } else if (Array.isArray(res.data.body) === false) {   const _arr = [];   _arr.push(res.data.body);   return _arr;  } else {   return res.data.body;  } } else {  if (res.data.error_no) {   return {    error_no: res.data.error_no,    error_msg: getErrorMsgByErrorNo(res.data.error_no)   };  } else {   return {    error_no: 123456,    error_msg: '服务器维护中，请稍后!'   };  } }}const httpClient = { request: function (method, url, data) {  return new Promise((resolve, reject) => {   wx.request({    url: url,    data: data,    method: method,    success: function (res) {     resolve(handleData(res))    },    fail: function (err) {     console.log('request fail ', err);     resolve({      error_no: 100,      error_msg: getErrorMsgByErrorNo(100)     })    },    complete: function (res) {     console.log("request completed!");    }   })  }); }, get: function (url) {  return this.request('GET', url); }, post: function (url, data) {  return this.request('POST', url, data); }, put: function (url, data) {  return this.request('PUT', url, data); }, delete: function (url, data) {  return this.request('DELETE', url, data); },};module.exports = httpClient;

使用

function getMyselfData() { const _Url= urls.url; return httpClient.get(_Url);} getData() {  let resultsData = this.getMyselfData();  resultsData.then((res) => {   if (res.error_no) {   // 只要有error_no就说明请求出现了错误    this.toast.showToast({     type: 'fail',     title: res.error_msg,    })   } else {    this.setData({     journeyList: res.data    })   }  }); },

希望本文所述对大家微信小程序开发有所帮助。

上一篇：nodejs搭建本地服务器并访问文件操作示例

下一篇：微信小程序自定义toast组件的方法详解【含动画】