快捷導(dǎo)航

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

更新時(shí)間：2021年11月23日 16:07:58 作者：tby_37

這篇文章主要為大家介紹了網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步

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

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

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

當(dāng)時(shí)的萬物皆回調(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，沒有使用XMLHttpRequest對(duì)象。

參數(shù)：

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

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

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

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

兼容性問題：

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)求

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

axios

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

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

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)

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

?

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

不通過實(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)攔截器（處理、過濾）

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)
});

以上就是網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的詳細(xì)內(nèi)容，更多關(guān)于原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: