小程序开发 网络请求

版权声明

本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17295654.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

  此篇博客简单了解小程序的网络请求与使用

准备工作

  在正式进行网络请求前，你需要给你的需要请求的域名去微信开发平台申请。微信公众平台 https://mp.weixin.qq.com/ 如果你是临时调试测试，可以用临时使用调试模式不需要申请域名。

申请域名

在下列图片中添加域名，请注意域名只支持https

调试模式

第一步点击详情

第二部勾选不验证合法域名

一个简单的POST网络请求

效果图

js

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    request() {
        var that = this
        wx.request({
            //请求的url地址
            url: 'http://00.000.000.000:8091/jiaiot/api/v1/dev/getSmsCode',
            method: 'POST',
            //请求时携带的参数
            data: {
                phoneNum: 181000025,
                type: 2
            },
            //请求头
            header: {
                'content-type': 'application/json' // 默认值
            },
            //请求成功
            success: function (res) {
                that.setData({
                    code: res.data.code,
                    msg: res.data.msg,
                    timeStamp: res.data.t
                })
                console.log(res.data);
            },
            //请求失败
            fail: function (err) {
                console.log(err);
            },
            //请求完成后执行的函数
            complete: function () {

            }
        })
    },
})

wxml

<!--pages/main/main.wxml-->
<view class="myParentBox">
    <button class="requestButton" bindtap="request">请求网络</button>
    <text class="requestResultText">{{code}}\n{{msg}}\n{{timeStamp}}</text>
</view>

上传文件

js

    uploadFileTest() {
        //wx.chooseMedia为小程序提供文件选取功能，这里选取一个图片上传
        wx.chooseMedia({
            count: 1, //选取文件数量
            type: ['image'], //文件类型，original原始
            sourceType: ['album', 'camera'],//选取文件原 album相册 camera相机
            success: function (res) {
                const tempFilePaths = res.tempFiles[0].tempFilePath

                //上传文件网络请求
                wx.uploadFile({
                    filePath: tempFilePaths,            //上传文件地址
                    name: 'images',                     //文件类型
                    url: 'https://httpbin.org/post',    //用于上传文件测试的公共url
                    success: function (res) {
                        console.log(res)
                    },
                    fail: function (err) {
                        console.log(err)
                    }
                })
            }
        })
    },

设置全局BaseUrl

使用App.js

在根目录下的app.js 添加需要的全局url

App({

  globalData: {
    userInfo: null,
    //添加url
    baseUrl: "http://00.000.000.000:8091/jiaiot"
  }
})

其他地方引用

wxml

//引用全局数据
const app = getApp()
const baseUrl = app.globalData.baseUrl
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    request() { 
        wx.request({
            //这里拼接url
            url: baseUrl + '/api/v1/dev/getSmsCode',
            method: 'POST',
            //请求时携带的参数，
            data: {
                phoneNum: 181000000,
                type: 2
            },
            //请求成功
            success: function (res) {
                console.log(res)
            },
            //请求失败
            fail: function (err) {
                console.log(err);
            },
            //请求完成后执行的函数
            complete: function () {

            }
        })
    },
})

自定义js

config.js

const baseUrl = "http://00.000.000.204:8091/jiaiot"

//module.exports 表明需要暴露给外部的变量与方法函数
module.exports = {
    //直接将变量暴露给外部
    baseUrl,
    //也可以是方法函数暴露给外部
    getBaseUrl:function(){
        return baseUrl
    }
}

引用

//引用config.js数据
const config = require('../../utils/config.js')

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    request() { 
        wx.request({
            //这里拼接url
            url: config.getBaseUrl() + '/api/v1/dev/getSmsCode',
            method: 'POST',
            //请求时携带的参数，
            data: {
                phoneNum: 181000000,
                type: 2
            },
            //请求成功
            success: function (res) {
                console.log(res)
            },
            //请求失败
            fail: function (err) {
                console.log(err);
            },
            //请求完成后执行的函数
            complete: function () {

            }
        })
    },
})

个人对网络请求的封装

创建request.js

const request = function (url, method, data, header) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: url,
            method: method,
            data: data,
            header: header,
            success: function (res) {
                const result = res.data.code
                if (result && result.code == 401) {
                    //token失效统一处理
                    reject(res)
                } else {
                    resolve(res)
                }
            },
            fail: function (res) {
                if (res.errMsg.indexOf("time out") > -1 || res.errMsg.indexOf("timeout") > -1) {
                    //请求超时
                    reject({
                        code: 402,
                        msg: "请求超时，请检查你的网络状态",
                        data: {}
                    })
                } else if (res.errMsg.indexOf("connect error") > -1) {
                    //没有网络
                    reject({
                        code: 403,
                        msg: "网络异常，请检查你的网络状态",
                        data: {}
                    })
                } else if (res.errMsg.indexOf("request:fail") > -1) {
                    //请求失败
                    reject({
                        code: 403,
                        msg: "网络异常，请检查你的网络状态",
                        data: {}
                    })
                } else if (res.data.status === 404) {
                    reject({
                        code: 404,
                        msg: "找不到服务",
                        data: {}
                    })
                } else {
                    reject({
                        code: 405,
                        msg: "服务器异常",
                        data: {}
                    })
                }
            },
            complete: function () {

            }
        })
    })
}

const addTokenAndBaseUrlRequest = function (url, method, data) {
    return request("http://00.100.000.000:8091/jiaiot" + url, method, data, {
        //这里可以统一添加token
        token: "token"
    })
}

module.exports = {
    get: function (url, data) {
        return addTokenAndBaseUrlRequest(url, "GET", data)
    },
    post: function (url, data) {
        return addTokenAndBaseUrlRequest(url, "POST", data)
    },
    put: function () {},
    patch: function () {}
}

使用

const mRequest = require('../../request/request.js')

Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    request2() {
        mRequest.post('/api/v1/dev/getSmsCode', {
            phoneNum: 181000000,
            type: 2
        }).then(function(res){
            console.log(res)
        }).catch(function(err){
            console.log(err);
        })
    },

})

 

 

End