小程序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这个修改会有问题的所以我们要建一个文件写请求的接口路径 如图所示

使用方法

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)
    ...
}
复制代码

结尾

以上就是整个流程啦 欢迎大家提议，相互学习 嘿嘿