vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的示例分析

這篇文章主要介紹vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、 原生網(wǎng)絡(luò)請(qǐng)求

1. XMLHttpRequest（w3c標(biāo)準(zhǔn)）   

// 沒(méi)有promise時(shí)的產(chǎn)物

當(dāng)時(shí)的萬(wàn)物皆回調(diào)，太麻煩

2. Fetch   

// html5提供的對(duì)象，基于promise  因?yàn)閜romise的存在，為了簡(jiǎn)化網(wǎng)絡(luò)請(qǐng)求。

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

Fetch是新的ajax解決方案 Fetch會(huì)返回Promise對(duì)象。fetch不是ajax的進(jìn)一步封裝，而是原生js，沒(méi)有使用XMLHttpRequest對(duì)象。

參數(shù)：

1、第一個(gè)參數(shù)是URL:

2、第二個(gè)設(shè)置請(qǐng)求的參數(shù)，是可選參數(shù)

3、返回使用了Promise 來(lái)處理結(jié)果/回調(diào)

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

兼容性問(wèn)題：

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

使用fetch進(jìn)行網(wǎng)絡(luò)請(qǐng)求 let url1  url2  兩個(gè)地址同時(shí)執(zhí)行完畢后才進(jìn)行相關(guān)操作 Promise.all

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

封裝 -- fetch網(wǎng)絡(luò)請(qǐng)求

封裝 -- fetch網(wǎng)絡(luò)請(qǐng)求_tby_pr的博客-CSDN博客

二、 js網(wǎng)絡(luò)請(qǐng)求庫(kù)

axios

以promise類型返回 json 數(shù)據(jù)。

文檔：使用說(shuō)明 · Axios 中文說(shuō)明 · 看云

Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和node.js中。

能攔截請(qǐng)求和響應(yīng)，自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)。axios也是vue作者推薦使用的網(wǎng)絡(luò)請(qǐng)求庫(kù)。

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

或通過(guò)實(shí)例請(qǐng)求

通過(guò)實(shí)例請(qǐng)求，添加設(shè)置信息（常用）！

不通過(guò)實(shí)例做統(tǒng)一設(shè)置（不常用），因?yàn)槭墙o所有人都設(shè)置

// 統(tǒng)一給axios設(shè)置
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直接用 # 標(biāo)準(zhǔn)寫法（也不常用）

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

攔截器   切面編程

（流水線）   (中間件)

1. 請(qǐng)求攔截器（能調(diào)用多次）

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

2. 響應(yīng)攔截器（處理、過(guò)濾）

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

以上是“vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！