wx-ajax

特性

1、基于 wx.request 的二次封装支持 Promise 和原有 callback 回调函数 （上传文件模块开发中）

2、使用门槛低，容易上手，提供和axios相似体验，兼容低版本手机系统。

安装

npm i wx-ajax -S --production

使用方法

小程序如何使用 npm 模块

参数说明

|字段|类型|默认值|必填| |:---|:---:|---:|---:| |path|String|无|是| |method|String|GET|GET请求可省略| |showLoading|Object|false 不显示, true显示默认的配置, 默认值是false|否| |header|Object|{content-type:application/json, accessToken: wx.getStorageSync("token")}|否| |dataType|String|json|否| |data|Object|{}|否| |success|Function|null|Promise下省略| |fail|Function|null|Promise下省略|

// showLoading 有三个字段
showLoading：{
    msg:"可以自定义你的loading提示",
    endTime:200  // loading的延时关闭 默认 500毫秒
    mask: false  // 默认是false 和微信小程序配置的一样
}

引入

1、require

const api = require('wx-ajax')(host);  // 你的服务器域名

// 举例:
const api = require('wx-ajax')('http://jsonplaceholder.typicode.com');  // 实例化的ajax对象

2、es6

import api from 'wx-ajax';
const api = api(host);   // 你的服务器域名

// 举例：
const api2 = api('http://api.link97.com:8081');

Promise 请求示例

1、POST

api.ajax({
    path:'/posts',
    method:'POST',
    showLoading:true,
    data:{
        id:1
    }
}).then(({ data }) => console.log(data));

2、GET

api.ajax({
    path:'/posts',
    showLoading:true
    data:{  // get的传参方式跟post是一样的 都是data对象传参 当然也可以在url处拼接
        id:1
    }
}).then(({ data }) => console.log(data));

3、PUT

api.ajax({
    path:`/posts/${editId}`,
    showLoading:{
        endTime:600,
        msg:"修改中..."
    },
    data:{ 修改的data }
}).then(res => console.log(res));

4、DELETE

api.ajax({
    path:`/posts/${deleteId}`,
    showLoading:{
        endTime:600,
        msg:"删除中..."
    }
}).then(res => console.log(res));

回调函数请求示例

1、POST

api2.ajax({
    path:'/goods',
    method:'POST',
    showLoading:true,
    data:{
        id:1
    },
    success(res) {
        console.log(res);
    },
    fail(err) {
        console.log(err);
    }
})

2、GET

api2.ajax({
    path:'/goods',
    showLoading:true
    data:{  // get的传参方式跟post是一样的 都是data对象传参 当然也可以在url处拼接
        id:1
    },
    success(res) {
        console.log(res);
    },
    fail(err) {
        console.log(err);
    }
})

3、PUT

api2.ajax({
    path:`/goods/${editId}`,
    showLoading:{
        endTime:600,
        msg:"修改中..."
    },
    data:{ 修改的data },
    success(res) {
        console.log(res);
    },
    fail(err) {
        console.log(err);
    }
})

4、DELETE

api2.ajax({
    path:`/goods/${deleteId}`,
    showLoading:{
        endTime:600,
        msg:"删除中..."
    },
    success(res) {
        console.log(res);
    },
    fail(err) {
        console.log(err);
    }
})

同样支持axios 方法 方法内接受三个参数 path：String， data：Object，header：Object (header、data选填，path必填)

api.ajax('/posts').then(res => console.log(res)).catch(err => console.log(err));

Copy right Mason 有问题联系 QQ：463961434

Author By Mason @ LINK + 创意工作室