小程序接口封装、异步加载、Promise

目录

1、页面准备

2、在app.js中处理当前环境以便切换api的环境、公共变量

3、定义post、get请求方法 request.js

4、api.js 接口列表调用index.js的post、get请求

5、index.js 需要返回数据的页面

api.js 、index.js 示例

异步实现 async、await


1、页面准备

目录结构:pages > index       与pages同级 utils > request.js、api.js

小程序接口封装、异步加载、Promise_第1张图片

①页面index.js

②封装的post、get请求方法request.js

③接口请求列表 api.js(相同业务模块下的api可以统一整理到一个js中,方便管理修改等,也可不放同一个js中)

2、在app.js中处理当前环境以便切换api的环境、公共变量

// app.js
  //定义环境变量,和 api域名
  let env, apiUrl = 'https://appapi.5i5j.com';
  if (typeof __wxConfig === 'object') {
    let version = __wxConfig.envVersion;
    if (version === 'develop') {//开发版
      env = 'dev';
    } else if (version === 'trial') {//体验版 
      env = 'trial';
    } else { //生产
      env = 'release';
    }
  }
  //通过环境变量判断当前域名环境
  // apiUrl = env == 'release' ? '生产环境api' : '联调环境api';
  apiUrl = env == 'release' ? 'https://xxx.com' : 'https://xxx-test.com';
  console.log('当前环境:',env)

App({
  onLaunch() {
  },
  globalData: { //全局变量
    hostUrl:apiUrl, //api域名
    cityid:1 //接口上需要的城市
  }
})

3、定义post、get请求方法 request.js

//request.js
/***
 * POST请求
 * @param url 接口地址
 * @param data 请求参数
 * @param config 设置请求头
 */
export const post = (url, data = {}, config = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      ...config,
      method: "POST",
      success: res => resolve(res),
      fail: err => reject(err)
    })
  })
}
/***
 * GET请求
 * @param url 接口地址
 * @param data 请求参数
 * @param config 设置请求头
 */
export const get = (url, data = {}, config = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url + parmasFormat(data),
      ...config,
      method: "GET",
      success: res => resolve(res),
      fail: err => reject(err)
    })
  })
}
/***
 * 处理GET请求地址拼接 
 * @param obj 请求的参数对象
 * @param 如 {a:1,b:2} 返回?a=1&b=2
 */
export const parmasFormat = (obj) => {
  let paramsStr = ""
  Object.keys(obj).forEach((key, index) => {
    paramsStr += (index === 0 ? '?' : '&') + key + '=' + (obj[key] ?? '')
  })
  return paramsStr
}

4、api.js 接口列表调用index.js的post、get请求

// api.js

//引入request.js 中的 POST、GET请求
import { post , get } from "./request"

const app = getApp()//获取App()的实例
const { globalData } = app //获取全局变量
const { hostUrl ,cityid } = globalData //获取api域名和城市 ,如果有多个可以这样分开写 ,如果只有一个可以和上一行写一起

/***
 * POST请求
 * @param hostUrl app.js中的接口域名
 * @param data 需要的参数
 * 1、请求头不需要传特殊参数
 */
export const postTest1 = data => post(
  hostUrl + `接口地址` ,
  data,
  {
    header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  }
)

/***
 * POST请求
 * @param hostUrl app.js中的接口域名
 * @param data 需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const postTest2 = (data,config) => post(
  hostUrl + `接口地址` ,
  data,
  config
)

/***
 * GET请求
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * 1、请求头需要传特殊参数
 */
export const getTest= (params) => get(hostUrl + "接口地址", 参数对象)
/***
 * GET请求
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const getTest2 = (params,config) => get(hostUrl + "接口地址", 参数对象,设置的header)

5、index.js 需要返回数据的页面

// index.js
// 获取应用实例
const app = getApp()

//导入api请求列表  { 这里面的值对应的是 api 中的 postTest1:不单独设置header postTest2:单独设置header}
//import { 这里对应api里定义好的请求,用哪个写哪个,不需要的可以不写} from "../../utils/api"
import { postTest1 , postTest2, getTest,getTest2} from "../../utils/api"

Page({

  data: { },
  onLoad() { 
    //请求参数
    let params = {
		参数名1:值,
		参数名2:值
    }
    //设置请求头
    let headers= {
	    header:{
		    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 
		    'deviceid': '设备id',
	    }
    }

    //header 里不需要单独在设置特别参数
	postTest1(params).then(res => {
      if(res.statusCode == '200'){
        console.log('success',res)
      }else{
        console.log('error',res)
      }
    })
    //设置请求头的请求
	postTest1(params,headers).then(res => {
      if(res.statusCode == '200'){
        console.log('success',res)
      }else{
        console.log('error',res)
      }
    })
    //get 不设置header
    getTest(params).then(res =>{
      console.log('success',res)
    }).catch((err) => {
      console.log('err',err)
    })

    //get 设置header
    getTest2(params,headers).then(res =>{
      console.log('success',res)
    }).catch((err) => {
      console.log('err',err)
    })

  }

})

api.js 、index.js 示例

// api.js

//引入request.js 中的 POST、GET请求
import { post , get } from "./request"

const app = getApp()//获取App()的实例
const { globalData } = app //获取全局变量
const { hostUrl ,cityid } = globalData //获取api域名和城市 ,如果有多个可以这样分开写 ,如果只有一个可以和上一行写一起

/***
 * POST请求  例如1
 * @param hostUrl app.js中的接口域名
 * @param data  接口需要的参数
 * 1、请求头不需要传特殊参数
 */
export const post1 = data => post(
  hostUrl + `/brokering/${cityid}/v1/brokerlist` ,
  data,
  {
    header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  }
)

/***
 * POST请求 例如2
 * @param hostUrl app.js中的接口域名
 * @param data 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const post2 = (data,config) => post(
  hostUrl + `/appapi/renting/${cityid}/v1/list` ,
  data,
  config
)


/***
 * GET请求  例如3
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * 1、请求头不需要传特殊参数
 */
export const get1 = (params) => get(hostUrl + "/appapi/sale/v2/recommend/index", params)

/***
 * GET请求  例如4
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const get1 = (params,config) => get(hostUrl + "/appapi/sale/v2/recommend/index", params,config)
// index.js
// 获取应用实例
const app = getApp()

import { post1 , post2 ,get1 ,get2 } from "../../utils/api"

Page({
  data: { },
  onLoad() { 
    let params = {
      cityid:1,
      communityid:200013141
    }
    let headers= {
      header:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 
        'deviceid': '123',
      }
    }
    post1(params).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('res',res.data.data)
        }
      }else{
        console.log(res.data.msg)
      }
    })
    
    post2(params,headers).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('listHouse,res',res)
        }
      }else{
        console.log(res.data.msg)
      }
    })

    get1(params).then(res =>{
      console.log('res2',res)
    }).catch((err) => {
      console.log(err)
    })

    get2(params,headers).then(res =>{
      console.log('res3',res)
    }).catch((err) => {
      console.log(err)
    })
  },
})

异步实现 async、await

onLoad: async function (options) {
    let params = {
      cityid:1,
      communityid:200013141
    }
    await list(params).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('res',res)
        }
      }else{
        console.log(res.data.msg)
      }
    })

}

你可能感兴趣的:(微信小程序学习笔记,Promise,小程序,接口封装,async,await)