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

小程序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

文件目錄

一個項目請求接口特別多 咱們不能每一個文件請求接口都去寫url這個修改會有問題的因此咱們要建一個文件寫請求的接口路徑 如圖所示

使用方法

一、api入口文件

在api入口文件先定義
let url = "https://baidu.com";
export default url;
複製代碼

二、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,
}
複製代碼

這裏用專門文件去記錄域名爲了方便切換正式、測試、本地的環境。

三、引入url並拼接後臺給的接口

resource.js
// 引入url並拼接後臺給的接口
import {ROOT_API} from './config';
const hApi = {
    homeInfo: ROOT_API.concat('/homeInfo'), // 首頁信息
}
module.exports = hApi;
複製代碼

用一個專門的文件記錄後臺的接口這樣能夠方便更改接口，統一對該文件修改就能夠了

四、封裝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 = () => ()
複製代碼

五、頁面中使用方法

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

結尾

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