微信小程式如何呼叫API實現資料請求-wx.request()

達叔小生發表於2018-08-05

標題圖

前言

微信小程式不存在ajax,那麼它是如何實現資料請求功能的呢?微在信中提供了API的呼叫wx.request(OBJECT),這個是很不錯的。下面就講一下如何請求資料,簡單到不行。

wx.request

看文件時,提供了示例模板如下:

wx.request({
  url: 'test.php', //僅為示例,並非真實的介面地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
    'content-type': 'application/json' // 預設值
  },
  success: function(res) {
    console.log(res.data)
  }
})

如何調取資料這是個難題,但是要模擬呼叫是有可能的。因為有個網址:https://easy-mock.com/ ,提供了模擬資料的請求。那麼我們先來模擬一下資料吧,到時,複製連結給模板中的網址即可。


如圖登入官網,登入,接著點選箭頭,進入下一頁面。

圖片

點選建立介面。

圖片

更新資料,建立屬於自己的資料即可。

圖片

一可預覽效果,連結複製到url模板中。

圖片

圖片

接著我們開啟微信小程式的開發工具,在介面中新增按鈕請求即可。

 <button type='primary' bindtap='send'>請求資料</button>

在接著js檔案中新增事件。

//send
  send: function(){
    wx.request({
      url: '複製的連結', //僅為示例,並非真實的介面地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 預設值
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  }

點選按鈕如果出現下面的錯誤,那是因為要到詳情按鈕中,給個地方打個勾即可。

圖片

找到下方打鉤即可。

圖片

點選按鈕,即可檢視,請求資料效果出現了。

圖片

結語

  • 你完成了嗎?是不是,很容易呢?是不是很簡單呢?

送❤

相關文章