小程式wx.request()方法簡單封裝

陌々發表於2019-04-17
封裝

小程式wx.request()方法

發起 HTTPS 網路請求。

引數

屬性 型別 預設值 必填 說明 最低版本
url string 是 開發者伺服器介面地址
data string/object/ArrayBuffer 否 請求的引數
header Object 否 設定請求的 header，header 中不能設定 Referer。
content-type 預設為 application/json
method string GET 否 HTTP 請求方法
dataType string json 否 返回的資料格式
responseType string text 否 響應的資料型別 1.7.0
success function 否 介面呼叫成功的回撥函式
fail function 否 介面呼叫失敗的回撥函式
complete function 否 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

success回撥函式返回的資料 data、statusCode、header

小程式wx.request()方法簡單封裝

檔案目錄

一個專案請求介面特別多 我們不能每個檔案請求介面都去寫url這個修改會有問題的所以我們要建一個檔案寫請求的介面路徑 如圖所示

小程式wx.request()方法簡單封裝

使用方法

1、api入口檔案

在api入口檔案先定義
let url = "https://baidu.com";
export default url;
複製程式碼

2、config.js配置請求的url

config.js
配置請求的url

var api_url = require('../apientry/index.js');
var config = {
	api: api_url.default
}
module.exports = {
	ROOT_API: config.api,
}
複製程式碼

這裡用專門檔案去記錄域名為了方便切換正式、測試、本地的環境。

3、引入url並拼接後臺給的介面

resource.js
// 引入url並拼接後臺給的介面
import {ROOT_API} from './config';
const hApi = {
    homeInfo: ROOT_API.concat('/homeInfo'), // 首頁資訊
}
module.exports = hApi;
複製程式碼

用一個專門的檔案記錄後臺的介面這樣可以方便更改介面，統一對該檔案修改就可以了

4、封裝wx.request()方法

import {homeInfo} './resource.js';

index.js
封裝wx.request()方法
var wxRequest = (url, data = {}, method = 'POST') => {
  return new Promise(function (resolve, reject) {
    wx.request({
      url,
      method,
      data: data,//getObj(data),
      header: {},
      success: (res) => {
        console.log(res)
        resolve(res.data)
      },
      fail: (data) => {
        reject(data)
      },
      complete: (data) => {
      }
    })
  })
};
將後臺介面封裝成一個方法，每次只呼叫該方法就OK
module.exports = {
    homeInfo (data){
        return wxRequest(homeInfo, data);
    },
}
簡單介紹一下隱士返回值
var wxRequest = () => {return }  相當於 var wxRequest = function wxRequest(){return }
也可以寫成 var wxRequest = () => ()
複製程式碼

5、頁面中使用方法

import {homeInfo} from '@/api/index.js';
async getHomeInfo () {
    let params = {}
    let res = awiat homeInfo (params)
    ...
}
複製程式碼

結尾

以上就是整個流程啦 歡迎大家提議，相互學習 嘿嘿

相關文章