微信小程序-网络请求

程序开发中难免要与后台进行交互，今天我们就来说一说，微信小程序中的网络请求

我们通过 wx.request(object)来进行网络请求,下面我们看下object 中有哪些参数

16562265-9C9B-41B9-8590-F591E75E26FE.png

看看他的用法，上代码

CCB63E3C-D641-4F3F-8083-48E09557B6D3.png

下面是来自，官方文档的一些注意事项
1）data

1.data 数据说明 最终发送给服务器的数据是 String 类型，
如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 header['content-type'] 为 'application/json' 的数据，会对数据进行 JSON 序列化

对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

2）.method

    1.默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

    2.值必须为大写

3） header

1.header 为 application/json，接口传回来的参数要是json 格式的，
否则会报500错误，比如我接口返回来的参数是xml则header['content-type'] 
要设置为'application/x-www-form-urlencoded'

接下来我们可以封装一个自己的request 请求
创建一个request.js 文件，代码如下

var rootDocment = 'hxxxxx';//你的域名  
function req(url,data,cb){  
    wx.request({  
      url: rootDocment + url,  
      data: data,  
      method: 'post',  
      header: {'Content-Type': 'application/json'},  
      success: function(res){  
        return typeof cb == "function" && cb(res.data)  
      },  
      fail: function(){  
        return typeof cb == "function" && cb(false)  
      }  
    })  
}  
  
  
module.exports = {  
  req: req  
}  

其中module.exports是将req方法暴露出去使得别的文件中可以使用该方法，由于js函数是异步执行的，所以return 的是回调函数，而不是具体的数据

为了其他文件方便调用此方法，我们在根目录的app.js文件中将其注册成为全局函数，如下

//app.js

var http = require('../../request.js')  
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  },
 func:{  
    req:http.req  
  } 
})

这时这个req就是全局的了，在调用时我们可以使用getApp.func.req()来调用，具体如下

var app = getApp()  
Page({  
  data: {  
      
  },  
  onLoad: function (opt) {  
    //console.log(opt.name)  
   app.func.req('/api/get_data',{},function(res){  
     console.log(res)  
    });  
  }  
})