>  기사  >  웹 프론트엔드  >  가져오기 요청을 캡슐화하고 미니 프로그램의 요청을 전역 함수(코드)로 게시합니다.

가져오기 요청을 캡슐화하고 미니 프로그램의 요청을 전역 함수(코드)로 게시합니다.

不言
不言원래의
2018-08-11 17:52:522157검색

이 글의 내용은 미니 프로그램의 get 요청과 post 요청을 전역 함수(코드)로 캡슐화하는 내용입니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.

먼저 app.js에서 이 코드를 복사하세요

  /**
   * methods: 请求方式
   * url: 请求地址
   * data: 要传递的参数
   * callback: 请求成功回调函数
   * errFun: 请求失败回调函数
   */
  appRequest(methods, url, data, callback, errFun) {
    wx.request({
      url: url,
      method: methods,
      header: {        
      'content-type': methods == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded'
      },
      dataType: 'json',
      data: data,
      success: function (res) {
        callback(res.data);
      },
      fail: function (err) {
        errFun(err);
      }
    })
  },

먼저 get 요청입니다

const app = new getApp();// page/a/a.jsPage({  /**
   * 页面的初始数据
   */
  data: {

  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    //懒人的写法 URL过长和传参多的时候比较不美观
    app.appRequest('get', 'https://www.apiopen.top/satinApi?type=1&page=1', {}, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });    //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护
    let url = 'https://www.apiopen.top/satinApi?type=1&page=1';
    app.appRequest('get', url, {}, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });
  }
})

get 요청을 요청할 때 데이터 매개변수를 {}

다음으로 post 요청

const app = new getApp();// page/b/b.jsPage({  /**
   * 页面的初始数据
   */
  data: {

  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    //懒人的写法 URL过长和传参多的时候比较不美观
    app.appRequest('post', 'https://www.apiopen.top/satinApi', { type:1, page:1 }, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });    //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护
    let url = 'https://www.apiopen.top/satinApi';
    let data = {        type: 1,
        page: 1
    }
    app.appRequest('post', url, data, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });
  }
})

으로 작성하세요. 모든 URL이 페이지에 있으면 유지 관리 비용이 증가하므로 모든 인터페이스를 하나의 파일에 배치해야 하므로 app.js에 배치하기로 결정했습니다. 작성법은 다음과 같습니다

//app.js里面添加全局属性,和一个函数//全局请求URL处理函数
 globalRequestUrl(domainName, site) {   return this.globalData[domainName] + this.globalData[site]
 },//全局所有请求Url
 globalData: {
   domainNameA: 'https://www.apiopen.top',//请求域名A
   domainNameB: 'https://www.apiopen.top',//请求域名B
   siteA: '/satinApi'
 }

C페이지의 get 요청을 사용하려면 전역 요청 URL 처리 기능을 사용하세요

const app = new getApp();// page/c/c.jsPage({  /**
   * 页面的初始数据
   */
  data: {

  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    //懒人的写法 URL过长和传参多的时候比较不美观
    app.appRequest('get', app.globalRequestUrl('domainNameA','siteA'), {}, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });    //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护
    let url = app.globalRequestUrl('domainNameA','siteA');
    app.appRequest('get', url, {}, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });
  }
})

D페이지의 게시 요청을 사용하려면 전역 요청 URL 처리 기능을 사용하세요

const app = new getApp();// page/d/d.jsPage({  /**
   * 页面的初始数据
   */
  data: {

  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    //懒人的写法 URL过长和传参多的时候比较不美观
    app.appRequest('post', app.globalRequestUrl('domainNameA','siteA'), { type:1, page:1 }, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });    //稍微优雅一点的写法,其实就是多一行代码,但是美观多了,也好维护
    let url = app.globalRequestUrl('domainNameA','siteA');
    let data = {        type: 1,
        page: 1
    }
    app.appRequest('post', url, data, (res) => {
      console.log(res)
    }, (err) => {
      console.log('请求错误信息:  ' + err.errMsg);
    });
  }
})
//传说中一行完成请求的代码在此,哈哈哈哈哈
app.appRequest('get', app.globalRequestUrl('domainNameA', 'siteA'), {}, (res) => {console.log(res)});

관련 권장 사항:

WeChat Mini 프로그램에서 페이지 풀다운 새로 고침 및 풀업 로딩을 구현하기 위한 추가 코드 예제

WeChat Mini 프로그램에서 전역 변수(코드)를 설정하는 방법

동기 요청을 구현하는 방법 위챗 미니 프로그램

위 내용은 가져오기 요청을 캡슐화하고 미니 프로그램의 요청을 전역 함수(코드)로 게시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.