小程序网络请求

wx.request

小程序与服务器交互场景大致有: request, uploadFile, onloadFile, websocket相关api

最常用的交互api是request, wx.request 用于向服务器发起请求

wx.request是异步调用, 它可发起https请求, wx.request的操作很类似于ajax发请求

onLoad: function (options) {
    var id = options.movie_id;
    wx.request({
      url: 'https://api.douban.com/v2/movie/top10',     // 请求的地址
      method: 'GET',      // GET请求
      data :{             // 发送请求时, 稍带的数据
        x:1, y:2
      },
      header :{           // 元数据
      },
      success : function() {    // 成功回调
      },
      fail : function() {       // 失败回调
      }, 
      complete : function() {   //成功与否都要回调
      }
    })
  }

先创建一个按钮:

<button size='mini' bindtap='showTop250movie'>显示豆瓣前10名的电影</button>

// 用于返回豆瓣前10名的电影(一个地址而已)
var api_url = "https://api.douban.com/v2/movie/top10";
Page({
  data: {
  },
  showTop250movie : function(e) {
    wx.request({
      url: api_url,
      data:{},
      header:{
          'content-type': 'application/json',    // 默认值
      }
      success:function(result) {
        console.log(result.data);                // data 是服务器返回的数据
        console.log(result.statusCode);          // statusCode服务器返回的 HTTP 状态码
      }
    })
  }
})

常用属性简介:

url为一个地址

data为发送请求时携带的数据 (就是像这样发送: pages/detail/detail?x=1&y=2)

success是服务成功返回时的回调函数

method通常为'GET'或'POST', 要大写(默认值是'GET')

dataType服务器返回的数据类型, 如果是json, 则会尝试对返回的数据做一次 JSON.parse

responseType设置响应的数据类型

success与403:

当发送请求后, 响应状态码为20,403,404,400等, 则都表示是成功响应

success只是表示服务器接收到了请求

所以需要在success函数中判断状态码是否为200

才能确定是否为真正的响应成功

如果输入一个不在合法域名列表中的域名, 则肯定是请求失败

合法的域名列表需要要小程序官网后台配置

异步请求:

onLoad: function (options) {
    wx.request({
      url: 'https://api.douban.com/v2/movie/top10',   
      method: 'GET',      
          
      success : function(e) {  
        console.log("成功");
        if (e.stauCode == 200) {
          console.log("真正响应成功");
        }
      },
      fail: function () {
        console.log("失败");
      }
    })

    console.log("ok");
  }

无论wx.request成功与否, 都会先打印出'ok'

这是因为数据请求(执行wx.request操作)的同时, 可以继续向下执行

可以将执行wx.request(...)的操作看作是一个独立的线程

wx.request与导航标题动画

当页面加载数据的时候, 可以设置一个动画以提示用户页面正在加载中

Page({
  data: {
   movie:{}
  },
  onLoad: function (options) {
    var that = this; 
    wx.request({
      url: 'https://api.douban.com/v2/movie/top10',   
      method: 'GET',      
      success : function(e) { 
        that.setData({
          // 根据情况设置内部变量的值
        });
        wx.hideNavigationBarLoading();
        wx.setNavigationBarTitle({
          title: "导航标题"     // 根据情况设导航页面的标题(会取代静态配置的导航标题)
        });
      },
    });

    wx.showNavigationBarLoading();    // 放置在请求外面
  }
})

wx.hideNavigationBarLoading(); 设置内部变量后将加载动画隐藏

wx.showNavigationBarLoading(); 设置一个加载动画(由于wx.request()函数异步请求, 因此让它与wx.request()并列执行)

wx.setNavigationBarTitle({ 隐藏动画后, 设置一个我们要展示的新的导航标题
title: "导航标题"
});

猜你喜欢