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

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

话不多说，先上完整代码

在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

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