在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://sharedblog.cn/post/207.html

来源：共享播客
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。