強烈推薦:支持Vue家族全系框架的跨平臺http請求庫-fly.js

Fly.js 一個基於Promise的、強大的、支持多種JavaScript運行時的http請求庫. 有了它,您可使用一份http請求代碼在瀏覽器、微信小程序、Weex、Node中都能正常運行。同時能夠方便配合 Vue家族的框架,最大可能的實現 Write Once Run Everywhere

Github: https://github.com/wendux/flyjavascript

問題

隨着 Weex 、mpvue 的發佈,他們都是支持Vue.js語法。目前vue已經你可以運行在瀏覽器、小程序和Native了。儘管各個平臺仍有差別,但已經基本能實現 Write Once Run Everywhere 。這使得咱們能夠在多個端上實現儘量大限度在代碼複用。可是不管是 vue 仍是Weex 、mpvue,它們本質上都只是一個View層,也就說最好的狀況,也只能實現UI複用。但對於一個應用程序來講,除了UI,最重要的就是數據了,而數據來源通常都是來自網絡請求(大多數都是http)。在使用這些框架時,您的網絡請求,都須要使用平臺特定的API!這很糟糕,意味着您網絡請求的代碼不能複用,因此儘管UI能夠複用,但咱們還須要去適配網絡請求部分的代碼。vue

一致的網絡請求

要解決這個問題,就須要一個能支持多個平臺網絡庫,用戶層提供統一的API,將平臺差別在底層屏蔽。而 Fly.js就是這醬紫的一個網絡庫,爲了方便axios使用者遷移,fly.js API設計風格和axios類似(但不徹底相同)!java

Fly.js 經過在不一樣 JavaScript 運行時經過在底層切換不一樣的 Http Engine來實現多環境支持,但同時對用戶層提供統1、標準的Promise API。不只如此,Fly.js還支持請求/響應攔截器、自動轉化JSON、請求轉發等功能,詳情請參考:https://github.com/wendux/flynode

已支持的平臺

目前Fly.js支持的平臺包括:Node.js微信小程序Weex 和瀏覽器,這些平臺的 JavaScript 運行時都是不一樣的。更多的平臺正在持續添加中,請保持關注。ios

Fly簡單使用示例

下面示例如無特殊說明,則在全部支持的平臺下都能執行。git

發起GET請求

//不一樣平臺可能須要引入不一樣文件,詳情見文檔
var fly=require("flyio")

//經過用戶id獲取信息,參數直接寫在url中
fly.get('/user?id=133')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//query參數經過對象傳遞
fly.get('/user', {
      id: 133
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
});

發起POST請求

fly.post('/user', {
    name: 'Doris',
    age: 24
    phone:"18513222525"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

發起多個併發請求

function getUserRecords() {
  return fly.get('/user/133/records');
}

function getUserProjects() {
  return fly.get('/user/133/projects');
}

fly.all([getUserRecords(), getUserProjects()])
  .then(fly.spread(function (records, projects) {
    //兩個請求都完成
  }))
  .catch(function(error){
    console.log(error)
  })

攔截器

Fly支持請求/響應攔截器,能夠經過它在請求發起以前和收到響應數據以後作一些預處理。github

//添加請求攔截器
fly.interceptors.request.use((request)=>{
    //給全部請求添加自定義header
    request.headers["X-Tag"]="flyio";
      //打印出請求體
      console.log(request.body)
      //終止請求
      //var err=new Error("xxx")
      //err.request=request
      //return Promise.reject(new Error(""))
  
    //能夠顯式返回request, 也能夠不返回,沒有返回值時攔截器中默認返回request
    return request;
})

//添加響應攔截器,響應攔截器會在then/catch處理以前執行
fly.interceptors.response.use(
    (response) => {
        //只將請求結果的data字段返回
        return response.data
    },
    (err) => {
        //發生網絡錯誤後會走到這裏
        //return Promise.resolve("ssss")
    }
)

除過以上這些使用,Fly.js 還有不少其它強大的功能,詳情請移步Fly.js.apache

反饋

若是您有問題歡迎在 在github 提issue . fly.js github: https://github.com/wendux/flyaxios

相關文章
相關標籤/搜索