小程序的网络请求 wx.request

目录

1、网络请求基本使用

2、通讯域名配置流程

3、网络请求的封装 Promise

4、进一步的封装思想

---

1、网络请求基本使用

微信小程序提供了专属的 API 接口，用于发送网络请求：wx.request（Object object），详情参考 官方文档。网络请求一般在页面的生命周期函数中执行，一旦页面加载完成（onLoad() 生命钩子），即发送网络请求。这里需要注意的是，发送网络请求时如果涉及到跨域问题，则需要事先设置通讯域名，小程序只可以跟指定的域名与进行网络通信 — 官方文档。

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeout	number		否	超时时间，单位为毫秒
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

//pages/home/home.js
Page({
    data:{ },
    onLoad: function (options){    //一般在 onLoad() 生命钩子中发送网络请求
        //发送最简单的get请求
        wx.request({
            url:'http://httpbin.org',     //网络接口允许与局域网IP通信，但要注意不允许与本机IP通信
            success: function(res){       //如果域名暂时没备案或申请，可暂时先到编译器的详情设置不校验合法域名
                console.log(res);
            }
        })
        //携带参数的get请求，参数需要放到data中
        wx.request({
            url:'http://httpbin.org',
            data:{ name:'erha', pwd:18 },
            success: function(res){ console.log(res); }
        })
        //发送post请求，并且携带参数
        wx.request({
            url:'http://httpbin.org/post',
            method:'post',
            data:{ name:'erha', pwd:18 },
            success: function(res){ console.log(res); },
            fail: function(err){ console.log(err); }
        })
    }
})

2、通讯域名配置流程

3、网络请求的封装 Promise

3.1、为啥要封装网络请求模块：如果对每个需要发送网络请求的页面或组件都引入 wx.request 的话，这样整个项目对 wx.request 的依赖性太大了，一旦 wx.request 崩了，或者被官宣不再继续维护了，那你这个项目就 mmp 了，你懂我意思吧，所以就要对 wx.request 模块进行封装，单独搞一个文件对 wx.request 做一个封装，之后所有的页面或组件在进行网络请求的时候都面向这一个文件，假如一旦有一天 wx.request 不再维护了，也根本不慌，只需要对 wx.request 封装的文件进行修改就完事了，真是个小机灵鬼。

3.2、怎么封装 wx.request 模块：一般在小程序的根目录下新建一个 service/network.js 文件用来封装 wx.request；

//service/network.js
import{baseURL, timeout} from "./config.js"     //可以对baseURL和timeout进行全局提取
export default function request(options){
    return new Promise((resolve,reject) => {    //Promise最大的好处就是防止出现回调地狱
        wx.request({
            url: baseURL + options.url, 
            time: timeout,
            method: options.method || ' get', 
            data: options.data || {}, 
            success: function(res){ resolve(res); }, 
            //fail: function(err){ reject(err); }
            fail: reject    //可以直接这样写，success也是
        })
    })
}

//pages/home/home.js
import request from "/service/network.js"
Page({
    data:{ },
    onLoad: function (options){    //一般在 onLoad() 生命钩子中发送网络请求
        //使用封装的request发送网络储求
        request({
            url:'http://httpbin.org',
            data:{ name:'erha', pwd:18 },
        }).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
})

4、进一步的封装思想

项目中的图片和数据一般会放到服务器上，因此在展示数据之前需要先拿到数据，这个时候就需要在页面加载（onLoad()）时发送网络请求，为了避免在每个页面都使用 wx.request() 方法，使项目和该方法的耦合度太高，就需要对网络请求的方法进行封装：在新建的 service 文件夹下新建 network.js 文件，还可以提取 baseURL、timeout 公共变量到 config.js 文件中方便后期维护。

除此之外，每个页面请求的数据最好分开，比如 home 页面需要请求的数据的方法，最好定义在 service 文件夹下新建 home.js 文件中，需要引用 network.js 组件，具体代码如下：

//service/config.js
const baseURL = 'http://127.0.0.1:8000';
const timeout = 5000;

//service/network.js
import { baseURL, timeout} from './config.js'
export default function(options){
  wx.showLoading({ title: '数据加载中ing' })
  return new Promise((resolve,reject) => {
    wx.request({
      url: baseURL + options.url,
      timeout: timeout,
      method: options.method || 'get',
      data: options.data || {},
      success: function (res) {
        resolve(res.data)
      },
      fail: reject,
      complete: res => {
        wx.hideLoading()
      }
    })
  })
}

//service/home.js
import request from './network.js'
export function getMultiData() {
  return request({
    url: '/home/multidata'
  })
}

// pages/home/home.js
import { getMultiData } from '../../service/home.js'
Page({
  data: { banners:[] },
  onLoad: function (options) {
    //请求图片及数据
    getMultiData().then(res => {
      const banners = res.data.banner.list;
      this.setData({    //将banners数据放到data中
        banners:banners
      })
    })
  }
})