**微信小程序常用方法、API封装之网络请求(wx.request)+ 接口(API)封装**

小程序交流群:609690978

首先了解一下,为什么要封装网络请求和API。
我认为一切封装都是为了简化开发,便于维护。比如,wx,request这个网络请求的方法,完整的写下来,是这样的:

	wx.request({
	  url: 'test.php', //仅为示例,并非真实的接口地址
	  data: {
	    x: '',
	    y: ''
	  },
	  header: {
	    'content-type': 'application/json' // 默认值
	  },
	  success (res) {
	    console.log(res)
	  },
	  fail(err){
		console.log(err)
	  }
	})

如果每个请求都这么写的话,首先你的代码实在是太繁琐了,其次api就直接暴露了,在web上可能人家一眼就能看到你的接口地址,不安全,而且一旦API有改动,你还得找到对应的页面去进行修改。工作量无形之中会增加很多。
那么我们就需要对网络请求和接口进行统一的封装和管理。

**

注意,此封装方法,也适用于VUE的AXIOS

**

首先,封装网络请求,这里采用es6的promise进行封装,我直接写在util.js里(关于promise,不懂的同学自行百度):

/**
 * 封装微信的的request
 */
 
function request(url, data = {}, method = "GET",contenType="") {
  let _this = this
  var token = wx.getStorageSync('token') //现在很多都是通过token来判断登录态的
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,//网络请求的url(接口地址)
      data: data,//网络请求的参数
      method: method,//网络请求的类型,默认get,传入post则为post
      header:contenType === "json" ? {'content-type':'application/json'} : {'content-type':'application/x-www-form-urlencoded'},//传入“json”这个字符串就是json请求头,否则是form请求头,这里甚至可以写“四元运算添加更多请求头”
      success: function (res) {
        if (res.statusCode == 200) {
          if (res.data.errno == 401) { //具体的值由自己后台决定,我是401,且字段为errno,有的可能是code
          	//我这里401表示未登录,需要进行登录处理
            let pages = getCurrentPages();
            let currPage = null;
            if (pages.length) {
              currPage = pages[pages.length - 1];
            }
            //需要登录后才可以操作
            //(登录页不需要提醒)
            if(currPage.__route__ !== 'pages/me/me'){
              console.log(currPage.__route__)
              //这里的wx.showMoadl可以封装为alert,具体请见我的另一篇文章**微信小程序常用方法、API封装之alert + showToast + 节流函数** https://blog.csdn.net/qq_43156398/article/details/91982034
              wx.showModal({ 
                title: '提示',
                content: '请先登录',
                showCancel:false,
                success: function (res) {
                  if (res.confirm) {
                    wx.removeStorageSync("userInfo");
                    wx.removeStorageSync("token");
                    wx.switchTab({
                      url: '/pages/me/me'
                    });
                  }
                }
              });
            }
          } else {
            resolve(res.data);
          }
        } else {
          reject(res.errMsg);
        }

      },
      fail: err=> {
        reject(err)
        _this.showErrorToast('请求超时')
      }
    })
  });
}

//输出该方法,便于子页面调用
module.exports = {
	request
}

第二步,创建api.js文件。这里介绍两种封装且管理api接口的方法:
1.单独封装
如果你是像我上面写的那样把网络请求当做变量传入的,就用这种方法

var baseUrl = 'http://localhost:8080/api' //定义域名+端口号+公共路径
module.exports = {
	//登录,比如你的登录接口是http://localhost:8080/api/login,且是post请求,由于在request封装里已经写了http://localhost:8080/api/,所以这里不用多写了,
	  AuthLoginByWeixin:`${baseUrl}/login`, //登录,post请求
	  getNewsList:`${baseUrl}/newsList`
}

//子页面
const util = require('../../utils/util.js');
const api = require('../../config/api.js');

login(){
	let data = {userName:'',password:''}  //对应封装里的data
	util.request(api.login,'POST',data).then(res=>{
		console.log(res) //成功回调
	}).catch(err=>{
		console.log(err) //失败回调
	})
}

getNewsList(){
	let data = {page:1,size:10}
	util.request(api.getNewsList,data).then(res=>{
		console.log(res) //成功回调
	}).catch(err=>{
		console.log(err) //失败回调
	})
}

2.独立封装,我们在项目中常用的网络请求一般是以下几种:get,post,upLoad,deletes,put,那么,我们可以将这些请求进行独立封装,其实就是复制粘贴,命名不同,然后请求类型写死,比如:

var baseUrl = 'http://localhost:8080/api'  //注意,现在把baseUrl写到封装里了
function _get(url, data = {},contenType="") { //函数名为_get
//function _post(url, data = {},contenType="") {//函数名为_post。这里我就不复制整段了,有变动的地方,我就注释起来标注
  let _this = this
  url = baseUrl + url
  var token = wx.getStorageSync('token') //现在很多都是通过token来判断登录态的
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,//网络请求的url(接口地址)
      data: data,//网络请求的参数
      method: 'GET',//网络请求的类型,写死GET
      //method: 'POST',//网络请求的类型,写死POST
      header:contenType === "json" ? {'content-type':'application/json'} : {'content-type':'application/x-www-form-urlencoded'},//传入“json”这个字符串就是json请求头,否则是form请求头,这里甚至可以写“四元运算添加更多请求头”
      success: function (res) {
        if (res.statusCode == 200) {
          if (res.data.errno == 401) { //具体的值由自己后台决定,我是401,且字段为errno,有的可能是code
          	//我这里401表示未登录,需要进行登录处理
            let pages = getCurrentPages();
            let currPage = null;
            if (pages.length) {
              currPage = pages[pages.length - 1];
            }
            //需要登录后才可以操作
            //(登录页不需要提醒)
            if(currPage.__route__ !== 'pages/me/me'){
              console.log(currPage.__route__)
              //这里的wx.showMoadl可以封装为alert,具体请见我的另一篇文章**微信小程序常用方法、API封装之alert + showToast + 节流函数** https://blog.csdn.net/qq_43156398/article/details/91982034
              wx.showModal({ 
                title: '提示',
                content: '请先登录',
                showCancel:false,
                success: function (res) {
                  if (res.confirm) {
                    wx.removeStorageSync("userInfo");
                    wx.removeStorageSync("token");
                    wx.switchTab({
                      url: '/pages/me/me'
                    });
                  }
                }
              });
            }
          } else {
            resolve(res.data);
          }
        } else {
          reject(res.errMsg);
        }

      },
      fail: err=> {
        reject(err)
        _this.showErrorToast('请求超时')
      }
    })
  });
}

module.exports = {
	_post,
	_get
}

,也就是每个请求独立一段封装,改掉函数名和请求类型。封装文件的代码量会很多,但是它有个更方便的功能:把API和网络请求再次封装。这时候,我们api.js里就可以改一下了

//引入util里的get,post以及你独立封装的其它方法,我拿post和get举例
 import {_get,_post} from '../common/util'
 //这里就不用写var baseUrl = 'XXX'了,因为我们封装里有
 module.exports = {
	login(params){ //params对应封装里的data,变量而已,名字你们自己随便取
		return _post('/login',params)
	},
	getNewsLiss(params){
		return _get('/newsList',params)
	}
}

//子页面

```js
	const api = require('../../config/api.js');
	login(){
		let data = {userName:'',password:''}
		api.login(data).then(res=>{
			console.log(res) //成功回调
		}).catch(err=>{
			console.log(err) //失败回调
		})
	},
	
	getNewsList(){
		let data = {page:'1',size:'10'}
		api.getNewsList(data).then(res=>{
			console.log(res) //成功回调
		}).catch(err=>{
			console.log(err) //失败回调
		})
	},

是不是简单了很多?
还有人可能会问,如果我接口上的参数是路径拼接的,比如http://localhost:8080/api/newsList/1/10(新闻列表,页数传1,每页请求数量为10条),那么这种如何操作呢?其实非常简单,我拿第二种独立封装举例```

这里我就不单独写了,直接写一起

	getNewsLiss(params,page,size){ //如果还需要传对象参数,可以保留params,如果不需要传,可以去掉,page为页数,size每页数量
		return _post('/newsList',params,page,size)
	}

	//子页面
	data:{
		page:1,
		size:10
	}

	getNewsList(){
		api.getNewsList(this.data.page,this.data.size).then(res=>{
			console.log(res) //成功回调
			}).catch(err=>{
			console.log(err) //失败回调
		})
	}

OVER

小程序交流群:609690978

你可能感兴趣的:(微信小程序)