一、原生網路請求

1. XMLHttpRequwww.cppcns.comest（w3c標準）

// 沒有promise時的產物

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

2. Fetch

// html5提供的物件，基於promise 因為promise的存在，為了簡化網路請求。

使用 Fetch - Web API 介面參考 | MDN

Fetch是新的ajax解決方案 Fetch會返回Promise物件。fetch不是ajax的進一步封裝，而是原生，沒有使用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 兩個地址同時執行完畢後才進行相關操作 PromisbDOBUxcwhZe.all

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

fetch封裝網路請求

二、 js網路請求庫

axios

以promise型別返回 json 資料。

文件：使用說明 Axios 中文說明 看雲

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和nodehttp://www.cppcns.com.js中。

能攔截請求和響應，自動轉換JSON資料。axios也是作者推薦使用的網路請求庫。

// axios.get/post/put/delete
axios.get(url,config) // config可以設定頭資訊
axios.post(url,data,config)
axios.put(url,config)
axios.delete(url,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 => Phttp://www.cppcns.comromise.reject(err))

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

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

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