alipay-applets-request

支付宝小程序请求封装

Usage no npm install needed!

<script type="module">
  import alipayAppletsRequest from 'https://cdn.skypack.dev/alipay-applets-request';
</script>

README

安装

npm install alipay-applets-request

导入

// 按需导入 $http 对象 在支付宝小程序的app.js文件中引入
import { $http } from '@alipay-applets-request'

// 将按需导入的 $http 挂载到 al 顶级对象之上，方便全局调用
al.$http = $http

使用

使用方法

// 主要在支付宝开发者工具内使用，简化支付宝开发者工具发送请求

支持的请求方法

// 发起 GET 请求，data 是可选的参数对象 可以使用es6解构赋值
const { data:res } = al.$http.get(url, data)

// 发起 POST 请求，data 是可选的参数对象
const { data:res } = al.$http.post(url, data)

// 发起 PUT 请求，data 是可选的参数对象
const { data:res } = al.$http.put(url, data)

// 发起 DELETE 请求，data 是可选的参数对象
const { data:res } = al.$http.delete(url, data)

配置请求根路径

$http.baseUrl = 'https://www.example.com'

请求拦截器

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // do somethimg...
}

例 1，展示 loading 效果：

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  wx.showLoading({
    title: '数据加载中...',
  })
}

例 2，自定义 header 请求头：

// 请求开始之前做一些事情 类似vue的请求拦截器
$http.beforeRequest = function (options) {
  if (options.url.indexOf('/home/catitems') !== -1) {
    options.header = {
      'X-Access-Token': 'AAA',
    }
  }
}

响应拦截器

// 请求完成之后做一些事情
$http.afterRequest = function () {
  // do something...
}

例如，隐藏 loading 效果：

// 请求完成之后做一些事情
$http.afterRequest = function () {
  wx.hideLoading()
}