vue網絡請求方案原生網絡請求和js網絡請求庫

Posted on by

一、 原生網絡請求

1. XMLHttpRequest（w3c標準）   

// 沒有promise時的產物

當時的萬物皆回調，太麻煩

2. Fetch   

// html5提供的對象，基於promise 因為promise的存在，為瞭簡化網絡請求。

使用 Fetch – Web API 接口參考 | MDN

Fetch是新的ajax解決方案 Fetch會返回Promise對象。fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。

參數：

1、第一個參數是URL:

2、第二個設置請求的參數，是可選參數

3、返回使用瞭Promise 來處理結果/回調

fetch(url, options).then(res=>res.json()/text()).then(ret=>console.log(ret))

兼容性問題：

ie低版本不兼容Fetch怎麼辦？ =》 用第三方的Fetch庫【fetch-polyfill】

使用fetch進行網絡請求 let url1  url2  兩個地址同時執行完畢後才進行相關操作 Promise.all

let url1 不管它是否執行成功我都要去處理 Promise.finally

 

 

封裝 — fetch網絡請求

封裝 — fetch網絡請求_tby_pr的博客-CSDN博客

二、 js網絡請求庫

axios

以promise類型返回 json 數據。

文檔：使用說明 · Axios 中文說明 · 看雲

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和node.js中。

能攔截請求和響應，自動轉換JSON數據。axios也是vue作者推薦使用的網絡請求庫。

// axios.get/post/put/delete
axios.get(url,config) // config可以設置頭信息
axios.post(url,data,config)
axios.put(url,data,config)
axios.delete(url,data,config)

或通過實例請求

 

通過實例請求，添加設置信息（常用）！

不通過實例做統一設置（不常用），因為是給所有人都設置

// 統一給axios設置
axios.defaults.timeout = 10000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = 'admin'

post提交

// post提交
axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

 或者    axios直接用 # 標準寫法（也不常用）

// axios直接用
axios({
  url,
  method:'get',
  data:{}
}).then(res => console.log(res))

攔截器   切面編程

（流水線）   (中間件)

1. 請求攔截器（能調用多次）

axios.interceptors.request.use(config => {
  // 統一設置請求域名地址
  config.baseURL = 'http://localhost:3000'
  // 超時時間
  config.timeout = 1000
  // 設置頭信息
  config.headers.token = 'mytoken login'
  return config;
}, err => Promise.reject(err))

2. 響應攔截器（處理、過濾）

axios.interceptors.response.use(response => {
  return response.data
}, err => {
  // 可以在響應攔截器中統一去處理，請求異常
  alert('請求失敗瞭，請重新請求一次')
  return Promise.reject(err)
});

以上就是網絡請求方案原生網絡請求和js網絡請求庫的詳細內容，更多關於原生網絡請求和js網絡請求庫的資料請關註WalkonNet其它相關文章！

推薦閱讀：