微信小程序 接口请求封裝

2024年03月30日 前端 小程序 封装 接口 共享博客

话不多说,先上完整代码


在utils文件下新建文件“http.js”,放入下方代码

const host = 'http://www.iqzhan.com'; // 接口網址
const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域

// 接口地址拼接
const urls = {
  home: host + domain + 'home', // 获取首頁接口
  article: host + domain + 'article', // 获取文章詳情接口
}
export default urls;


继续在utils文件下新建文件“request.js”,放下放代码

// 引入接口
import urls from './http';

// 默認请求头(可自行添加token等)
var header = {
  'content-type': 'application/x-www-form-urlencoded',
}

/**
 * function: 封装网络请求
 * @url     URL地址
 * @params  请求参数
 * @method  GET/POST(请求方式)
 * @resolve 成功回调
 * @reject  失败回调
 */
function request(url, params, method, resolve, reject) {
  wx.showLoading({
    title: "加载中...",
  })
  wx.request({
    url: url, // 接口地址
    data: dealParams(params), // 請求參數
    method: method, // 請求方式
    header: header, // 請求頭
    success: (res) =>{
      wx.hideLoading(); // 關閉加載提示
      if (res.data) {
        // 判斷請求成功的狀態碼
        if (res.data.code == 100000) {
          resolve(res.data);
        } else {
          reject(res.data);
        }
      }
    },
    fail: function(error) {
      reject("");
    }
  })
}

/**
 * function: 請求時添加必帶的固定參數,沒有需求無需添加
 * @params   请求参数
*/
function dealParams(params) {
  return params = Object.assign({}, params, {
    // id: '666',
  })
}

const apiService = {
  // POST請求
  REQUESTPOST(url, params) {
    return new Promise((resolve,reject) => {
      request(url, params, "POST", resolve, reject);
    })
  },
  // GET請求
  REQUESTGET(url, params) {
    return new Promise((resolve,reject) => {
      request(url, params, "GET", resolve, reject);
    })
  }
}

// 外部調用接口
module.exports = {
  getHome: (params) => { // 获取首頁接口
    return new Promise((resolve,reject)=> {
      resolve(apiService.REQUESTGET(urls.home,params))
    })
  },
  getArticle: (params) => { // 获取文章詳情接口
    return new Promise((resolve,reject)=> {
      resolve(apiService.REQUESTGET(urls.article,params))
    })
  },
}


使用,在需要调用的页面js中,如下代码

// 引入需要使用的接口
import { getHome,getArticle } from '../../utils/request.js'

Page({
  getData: function (e) {
    // 获取首頁接口
    getHome({
      page: '1'
    }).then(res => {
      console.log(res)
    })
    // 获取文章詳情接口
    getArticle({
      id: '1527'
    }).then(res => {
      console.log(res)
    })
  },
  onLoad: function () {
    this.getData();
  },
})



接下来,讲解

http.js中

const host = 'http://www.iqzhan.com'; // 接口網址
const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域

定义接口地址,定义接口相同路径(http://www.iqzhan.com/os_wxapi/v1/home),为什么要分开定义,因为说不准页面里面只获取host的网址需求,当然你也可以两个直接拼接一起。


// 接口地址拼接
const urls = {
  home: host + domain + 'home', // 获取首頁接口
  article: host + domain + 'article', // 获取文章詳情接口
}

定义接口的路径与地址拼接。


request.js中

/**
 * function: 封装网络请求
 * @url     URL地址
 * @params  请求参数
 * @method  GET/POST(请求方式)
 * @resolve 成功回调
 * @reject  失败回调
 */
function request(url, params, method, resolve, reject) {
  wx.showLoading({
    title: "加载中...",
  })
  wx.request({
    url: url, // 接口地址
    data: dealParams(params), // 請求參數
    method: method, // 請求方式
    header: header, // 請求頭
    success: (res) =>{
      wx.hideLoading(); // 關閉加載提示
      if (res.data) {
        // 判斷請求成功的狀態碼
        if (res.data.code == 100000) {
          resolve(res.data);
        } else {
          reject(res.data);
        }
      }
    },
    fail: function(error) {
      reject("");
    }
  })
}

封装的请求,请求拦截


/**
 * function: 請求時添加必帶的固定參數,沒有需求無需添加
 * @params   请求参数
*/
function dealParams(params) {
  return params = Object.assign({}, params, {
    // id: '666',
  })
}

请求固定的参数,有些项目需求,每个接口都必须传递某个参数,即可使用上方代码实现。


const apiService = {
  // POST請求
  REQUESTPOST(url, params) {
    return new Promise((resolve,reject) => {
      request(url, params, "POST", resolve, reject);
    })
  },
  // GET請求
  REQUESTGET(url, params) {
    return new Promise((resolve,reject) => {
      request(url, params, "GET", resolve, reject);
    })
  }
}

对应的post和get请求


// 外部調用接口
module.exports = {
  getHome: (params) => { // 获取首頁接口
    return new Promise((resolve,reject)=> {
      resolve(apiService.REQUESTGET(urls.home,params))
    })
  },
  getArticle: (params) => { // 获取文章詳情接口
    return new Promise((resolve,reject)=> {
      resolve(apiService.REQUESTGET(urls.article,params))
    })
  },
}

外部调用接口








本文链接:http://so.lmcjl.com/news/701/

展开阅读全文