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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序 接口请求封裝 小程序接口请求封装，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4212字，纯文字阅读大概需要7分钟。

内容图文

话不多说，先上完整代码

在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

 

 

内容总结

以上是互联网集市为您收集整理的微信小程序 接口请求封裝 小程序接口请求封装全部内容，希望文章能够帮你解决微信小程序 接口请求封裝 小程序接口请求封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---