15. 发起请求

于2023-05-22 10:28:14发布

小程序发起请求类似jquery的$.ajax

例子 :

Page({
  data: {
    name: ''
  },
  onShow() {
    wx.request({
      url: 'http://localhost:8080/login',
      method: 'get',
      data: {
        name: 'tom',
        password: '12345678'
      },
      success: (res)=> {
        this.setData({
          name: res.data.result.name
        })
      }
    })
  }
})

参数：

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 `content-type` 默认为 `application/json`
timeout	number		否	超时时间，单位为毫秒	2.10.0
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型	1.7.0
enableHttp2	boolean	false	否	开启 http2	2.10.4
enableQuic	boolean	false	否	开启 quic	2.10.4
enableCache	boolean	false	否	开启 cache	2.10.4
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

method 的合法值

值	说明	最低版本
OPTIONS	HTTP 请求 OPTIONS
GET	HTTP 请求 GET
HEAD	HTTP 请求 HEAD
POST	HTTP 请求 POST
PUT	HTTP 请求 PUT
DELETE	HTTP 请求 DELETE
TRACE	HTTP 请求 TRACE
CONNECT	HTTP 请求 CONNECT

dataType的合法值

值	说明	最低版本
json	返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
其他	不对返回的内容进行 JSON.parse

responseType 的合法值

值	说明	最低版本
text	响应的数据为文本
arraybuffer	响应的数据为 ArrayBuffer	1

success 回调函数

属性	类型	说明	最低版本
data	string/Object/Arraybuffer	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.0
cookies	Array.<string>	开发者服务器返回的 cookies，格式为字符串数组	2.10.0
profile	Object	网络请求过程中一些调试信息	2.10.4

更多详细资料请参考： https://www.w3cschool.cn/weixinapp/weixinapp-network-request.html

使用promise封装请求

utils/request.js

const BASE_URL = 'http://111.230.246.226:8088';

const request = (params) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + params.url,
      method: params.method || 'GET',
      data: params.data || {},
      header: params.header,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err);
      }
    })
  });
}

export default request;

api/user.js

import request from "../utils/request"

export const getList = () => {
  return request({
    url: '/getList',
    method: 'get',
    data: {
      nowPage: 1,
    }
  })
}

pages/index.js

import { getList } from "../../api/user"

Page({
  async onShow() {
    const res = await getList();
    console.log(res);
  }
})