小程序wx.request()方法简单封装

2,202 阅读2分钟

小程序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)
    ...
}

结尾

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