微信小程序接口请求封裝小程序接口请求封装

本文主要是介绍微信小程序接口请求封裝小程序接口请求封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

话不多说，先上完整代码

在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)
    })
  },
  onl oad: 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://iqzhan.com/category-23.html

原文地址 http://www.sharedblog.cn/post/207.html

前端博客 http://sharedblog.cn

这篇关于微信小程序接口请求封裝小程序接口请求封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信公众号开发