微信小程序api的封装使用

目录

1.设置访问baseUrl

2.封装request

3.创建api文件

4.引用

---

1.设置访问baseUrl

在static文件夹（static文件夹是用来放置图片等资源的文件夹）中新建config.js文件，设置baseUrl

config.js文件

module.exports={
  baseUrl:"https://xxx.xx.xx"
} 

2.封装request

在utils文件中新建request.js文件，用来存放封装的wx.request

request.js文件

//引入baseURL
const {baseUrl}=require('../static/config')

如果有令牌token设置token，没有请忽略

//获取本地存储的token
const getTokenStorage = () => {
	let token = ''
	try {
		token = wx.getStorageSync('token')
	} catch (e) {}
	return token
}

二次封装wx.request 

//data:{url:'',method:'get/post/...',data:''} 
const request=(data)=>{
    return new Promise((resolve,reject)=>{
      wx.request({
        url:baseUrl+data.url,//拼接url
        data:data.data,
        method:data.method,
        header:{
          'content-type':' application/x-www-form-urlencoded',
          'Authorization': getTokenStorage()//token
        },
        success:res=>{
          if(res.statusCode===200){
            if (res.data.status== 200) {
              resolve(res.data);
            }else if (res.data.status=== 601) {
                resolve(res.data)
            }else{
              wx.showToast({
                title: "服务器异常，请稍后重试",
                icon: 'none',
                duration: 2000,
                success: (() => resolve(res.data))
              })
            }
          }else{
            wx.showToast({
                title: "服务器异常，请稍后重试",
                icon: 'none',
                duration: 2000,
                success: (() => resolve(res.errMsg))
              })
          }
          
        },
        fail:err=>{
          wx.showToast({
            title: '服务器出错，请稍后重试',
            icon: 'none',
            duration: 2000,
            success: (() => resolve(err))
          })
        }
      })
    })
  }

module.exports={request}

3.创建api文件

在api文件夹下新建api.js文件，管理接口

//引入request
const {request}=require('../utils/request');
 

//定义接口
export function init(data) {
  return request({
    url: "/open/init",
    method: "post",
    data: data,
  });
}

4.调用

在文件中调用

//引入api
const {init}=require('../../api/api')


onLoad() {
//调用
   let info={a:"",b:""}
   init(info).then(res => {
      console.log(res);
    }).catch(err=>{
        console.log(res)
    })
}