├── dev.js ├── README.md └── dev_request.js /dev.js: -------------------------------------------------------------------------------- 1 | var dev_request = require('./dev_request'); 2 | 3 | 4 | function request() { 5 | //POST/DELETE 请求方式调用方法一样 6 | 7 | //1、网络请求（没有请求参数，不需要对请求失败情况处理） 8 | dev_request.Get('/classify', function (res) { 9 | console.log(res); 10 | }) 11 | 12 | //2、网络请求（没有请求参数，需要对请求失败情况处理） 13 | dev_request.Get('/classify', function (res) { 14 | console.log(res); 15 | }, function (err) { 16 | console.log(err); 17 | }) 18 | 19 | //3、网络请求（有请求参数，不需要对请求失败情况处理） 20 | var data = { 21 | username: 'username', 22 | age: 19 23 | }; 24 | dev_request.Get('/classify', data, function (res) { 25 | console.log(res); 26 | }) 27 | 28 | //4、网络请求（有请求参数，需要对请求失败情况处理） 29 | dev_request.Get('/classify', data, function (res) { 30 | console.log(res); 31 | }, function (err) { 32 | console.log(err); 33 | }) 34 | 35 | //5、取消网络请求(所有的请求方法均返回requestTask对象，可中断请求任务) 36 | var requestTask = dev_request.Get('/classify', function (res) { 37 | console.log(res); 38 | }); 39 | //网络请求取消 40 | requestTask.abort() 41 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 微信小程序网络请求封装 2 | 3 | ### 功能简介 4 | 5 | 6 | ---------- 7 | 微信小程序网络请求封装很简单，因为我需要在每个网络请求里面加入自己**token、请求来源** 等 ，以便于服务器做验证。 8 | 9 | 10 | ### 功能介绍 11 | ---------- 12 | - header ：可以填写每次请求需要添加的信息到header 13 | - Code判断：根据后台的请求code进行网络请求判断处理，这样请求拿到的数据就只是自己需要的信息 14 | - 错误请求弹窗 ： code判断若网络请求错误，弹窗提示 15 | ``` javascript 16 | var wxtask = wx.request({ 17 | url: BASE_URL + url, 18 | header: { 19 | // 'content-type':'application/json', //默认 application/json :数据序列化 20 | // 'access-token': 'access-token', 21 | // 'app-type': 'wx-app' 22 | }, 23 | method: method, 24 | data: data, 25 | success: function (res) { 26 | console.log(res.data.code); 27 | switch (res.data.code) { 28 | case 10000://请求成功code 29 | console.log(success); 30 | success(res.data) 31 | break 32 | case 10001://请求失败code 33 | //错误请求 wx弹框提示错误信息 34 | wx.showToast({ 35 | title: res.data.msg, 36 | icon: 'none', 37 | duration: 1000 38 | }) 39 | if (fail) { 40 | fail(res.data.msg) 41 | } 42 | break 43 | } 44 | }, 45 | fail: function (res) { 46 | //错误请求 wx弹框提示错误信息 47 | wx.showToast({ 48 | title: res, 49 | icon: 'none', 50 | duration: 1000 51 | }) 52 | if (fail) { 53 | fail(res) 54 | } 55 | } 56 | }) 57 | ``` 58 | 59 | ### 如何使用 60 | ---------- 61 | - 直接使用，简单粗暴。 62 | - 把dev_request文件copy到项目中直接引用 63 | ``` javascript 64 | //POST/DELETE 请求方式调用方法一样 65 | //1、网络请求（没有请求参数，不需要对请求失败情况处理） 66 | dev_request.Get('/classify', function (res) { 67 | console.log(res); 68 | }) 69 | //2、网络请求（没有请求参数，需要对请求失败情况处理） 70 | dev_request.Get('/classify', function (res) { 71 | console.log(res); 72 | }, function (err) { 73 | console.log(err); 74 | }) 75 | //3、网络请求（有请求参数，不需要对请求失败情况处理） 76 | var data = { 77 | username: 'username', 78 | age: 19 79 | }; 80 | dev_request.Get('/classify', data, function (res) { 81 | console.log(res); 82 | }) 83 | //4、网络请求（有请求参数，需要对请求失败情况处理） 84 | dev_request.Get('/classify', data, function (res) { 85 | console.log(res); 86 | }, function (err) { 87 | console.log(err); 88 | }) 89 | //5、取消网络请求(所有的请求方法均返回requestTask对象，可中断请求任务) 90 | var requestTask = dev_request.Get('/classify', function (res) { 91 | console.log(res); 92 | }); 93 | //网络请求取消 94 | requestTask.abort() 95 | ``` 96 | ### 意见反馈 97 | ---------- 98 | 如果代码有错误，或者更好的改进，请反馈到：issue、927195249@qq.com 或者LiangLuDev@gmail.com 99 | 100 | 如果觉得对你有用的话，点一下右上的星星赞一下吧! -------------------------------------------------------------------------------- /dev_request.js: -------------------------------------------------------------------------------- 1 | const BASE_URL = 'http://101.132.124.212/api'; 2 | 3 | /** 4 | * 网络请求封装 5 | * @param url url路径名 例：/books 6 | * @param method 请求方式 POST/GET/DELETE等 7 | * @param data 请求参数 string类型 8 | * @param success 成功回调 9 | * @param fail 失败回调 10 | */ 11 | function request(url, method, data, success, fail) { 12 | if (!fail && !success && typeof data === 'function') { 13 | // fail = null; 14 | success = data; 15 | data = ""; 16 | } else if (!fail) { 17 | if (typeof data === 'function') { 18 | fail = success 19 | success = data 20 | data = "" 21 | } else if (typeof data === 'object') { 22 | // fail = null 23 | } else { 24 | console.log("传递参数类型不正确"); 25 | } 26 | 27 | } 28 | 29 | var wxtask = wx.request({ 30 | url: BASE_URL + url, 31 | header: { 32 | // 'content-type':'application/json', //默认 application/json :数据序列化 33 | // 'access-token': 'access-token', 34 | // 'app-type': 'wx-app' 35 | }, 36 | method: method, 37 | data: data, 38 | success: function (res) { 39 | console.log(res.data.code); 40 | switch (res.data.code) { 41 | case 10000://请求成功code 42 | console.log(success); 43 | success(res.data) 44 | break 45 | case 10001://请求失败code 46 | //错误请求 wx弹框提示错误信息 47 | wx.showToast({ 48 | title: res.data.msg, 49 | icon: 'none', 50 | duration: 1000 51 | }) 52 | if (fail) { 53 | fail(res.data.msg) 54 | } 55 | break 56 | } 57 | }, 58 | fail: function (res) { 59 | //错误请求 wx弹框提示错误信息 60 | wx.showToast({ 61 | title: res, 62 | icon: 'none', 63 | duration: 1000 64 | }) 65 | if (fail) { 66 | fail(res) 67 | } 68 | } 69 | }) 70 | 71 | 72 | return wxtask; 73 | } 74 | 75 | 76 | /** 77 | * 请求封装-Get 78 | * @param url 请求地址 79 | * @param data 请求参数 80 | * @param success 成功回调 81 | * @param fail 失败回调 82 | * @constructor 83 | * 84 | * 返回值为微信请求实例 用于取消请求 85 | */ 86 | function Get(url, data, success, fail) { 87 | return request(url, "GET", data, success, fail) 88 | } 89 | 90 | 91 | /** 92 | * 请求封装-Post 93 | * @param url 请求地址 94 | * @param data 请求参数 95 | * @param success 成功回调 96 | * @param fail 失败回调 97 | * @constructor 98 | * 99 | * 返回值为微信请求实例 用于取消请求 100 | */ 101 | function Post(url, data, success, fail) { 102 | return request(url, 'POST', data, success, fail) 103 | } 104 | 105 | 106 | /** 107 | * 请求封装-Delete 108 | * @param url 请求地址 109 | * @param data 请求参数 110 | * @param success 成功回调 111 | * @param fail 失败回调 112 | * @constructor 113 | * 114 | * 返回值为微信请求实例 用于取消请求 115 | */ 116 | function Delete(url, data, success, fail) { 117 | return request(url, 'DELETE', data, success, fail) 118 | } 119 | 120 | exports.Get = Get; 121 | exports.Post = Post; 122 | exports.Delete = Delete; --------------------------------------------------------------------------------