介绍

本库是开发微信小程序的http请求库，是基于 axios 原理对微信小程序wx.request封装的，本库轻便，小巧，api友好，功能丰富

✨ 特性

• 支持 Promise API
• 支持 Typescript 开发
• 拦截请求和响应
• 自定义配置请求实例
• 多种 Method 方法请求
• 支持 RequestTask 操作

🥗 安装

NPM

# 如果您的项目根目录没有package.json文件的话，请先执行如下命令生成：
npm init -y

# 安装
npm install h-wx-ajax

# 更新
npm update h-wx-ajax

🥐 实例

新建 ajax.js 文件（文件名可自定义）用于处理拦截器、接口根地址、默认配置等

// ajax.js

import ajax from 'h-wx-ajax'                                    // 引入 wx-ajax 模块

const instance = ajax.create(config)                          // 创建请求实例

instance.interceptors.request.use((config) => {               // 添加请求拦截器
    // 发送请求前处理...
    return config;
}, (err) => {
    return Promise.reject(err);
})     
instance.interceptors.response.use((response) => {            // 添加响应拦截器
    // 返回结果拦截处理...
    return response;
}, (err) => {
    return Promise.reject(err);
}) 

export default instance                                        // 导出创建后的实例

🥪 使用

请求方法

// 常规方法
ajax()

// 请求方法别名
ajax.get()
ajax.post()
ajax.put()
ajax.delete()

RequestTask

const request = ajax()                  // 请求方法每项皆可

request.abort()                         // 中断请求任务
request.onHeadersReceived(callback)     // 监听 HTTP Response Header 事件
request.offHeadersReceived(callback)    // 取消监听 HTTP Response Header 事件

其他属性方法

ajax.defaults          // 全局默认配置
ajax.config            // 当前实例配置
ajax.getURL(config)    // 获取实例请求地址

上传

h-wx-ajax 暂时只支持发起网络请求，如果你想要上传，你可以使用 wx.uploadFile 。这里举例，你可以根据项目实际情况处理。

// ajax.js
// 在 Ajax 实例上挂载 upload 方法
instance.upload = function upload({ url, filePath, formData, } = {}, callback) {
  return new Promise(async (resolve, reject) => {
        url = await this.getURL({ url });
        const token = "Token";
        const uploadTask = wx.uploadFile({
            url,
            filePath,
            name: 'file',
            header: {
                'Content-Type': 'multipart/form-data',
                "Authori-zation": token
            },
            ...args,
            // 如果第二个参数是 object 类型则作为 formData 使用
            formData: typeof formData === 'object' ? formData : {},
            complete: res => {
                if (res.statusCode === 200) {
                    res.data = typeof res.data === "string" ? JSON.parse(res.data) : { code: 500, msg: 'error' }
                    resolve(res.data)
                } else {
                    reject(res)
                }
            }
        })
        // 如果第二个参数是 function 类型则作为 uploadTask 的回调函数使用
        if (typeof callback === 'function') {
            callback(uploadTask)
        }
    })
}


// 使用方式
instance.upload({ url: 'upload', filePath: "file", formData: { name: '头像' } }); // 例子