最新 微信小程序API 封装及调用

小程序API 封装及调用

一、根目录新建 API文件夹

API文件夹名字 自定义

二、api.js、 config.js、 request.js 三者关系

三、request.js

封装所有请求的方法，在调用接口起 复用，不必重复编写请求代码

引用 config.js 中的基本 url  比如:https://www.ddd.com/interface

const { baseUrl } = require('./config.js').url

//url 具体接口地址
//data 请求数据

//封装请求
module.exports={
    request:function(url,data={}) {
      wx.showLoading({
        title: '加载中...',
      })
      // console.log('data----------  ',data);
      // console.log('url----------  ',url);
      let headers= {
        'Content-type':'application/x-www-form-urlencoded',
        'content-type': 'application/json'
      }
      //检查本地token
      let token = wx.getStorageSync("token");
      // console.log('token---------  ',token);
		
		//header携带 本地token
      if(token)
      {
        headers['session']=token;
      }
      // console.log('headers----------  ',headers);
      
      return new Promise((resolve,reject)=>{
        wx.request({
          url: baseUrl+url,//动态组合 接口地址
          method:"POST",
          data,
          header:headers,
          success(res){
            // console.log('res --------  ',res)
            if(res.data.msg ==="TimeOut" && res.data.success === false)                   {
              // 请求超时 自定义代码
            }
              //数据请求成功判断
            if (res.statusCode===200 ) {
              // 请求成功 自定义代码
              // console.log('res.data-----  ',res.data);
              resolve(res.data);
              wx.hideLoading()
            }
            else {
              resolve(res.data)
              return wx.showToast({
                icon: 'none',
                title: '请求失败',
                duration: 2000,
              })
            }
          }
        })
      })
    }
  }

四、config.js

封装 域名地址 其他信息

module.exports={
    url:{
      baseUrl:'https://www.ddd.com/interface'
    },
    //其他信息 自定义
    contInfo:{
      vers : "1.0.9",//版本
    }
  }

五、api.js

//引用 request.js

const { request }=require('./request.js');

  //封装接口

  module.exports={

    //登录接口
    login:(data)=>{
      return request('/login',data)
    },

    //退出接口
    loginout:(data)=>{
      return request('/logout',data)
    },

    //banner图接口
    getBanner:()=>{},

    // 自定义 接口....

  }

六、页面使用

小程序 js 页面引用  api.js

 const { login,loginout}=require('../..//http/api.js')//api接口
 
 Page({
  	data: {
        phone: '12345678901',
        password: '123456'
    },
    onLoad: function() {},
    login(){
    	const formData = {
    		phone:this.data.phone,
    		password:this.data.password
    	}
    	login(formData).then(data=>{
    		console.log("data--- ",data)
    		//自定义代码
    	})
    }
 })

拓展

Storage 存/删

// 本地保存 token/session
wx.setStorageSync('token', data.token)


// 本地删除 token/session
wx.removeStorageSync('token');

Request请求超时处理

App.json  添加
"networkTimeout": {
	"request": 100000 //自定义 ms为单位
}

在封装的 request.js 中   加  fail  接口请求超时显示信息
 wx.request({
      url: baseUrl+url,
      method:"POST",
      data,
      header:headers,
	  success(res){},
	  fail: function () {
		wx.hideLoading();
		wx.showModal({
			title: '提示',
			showCancel: false,
			content: '请求超时！',
		})
	   }
	 })

个人博客