前言

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)香洲免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

單頁面應(yīng)用大多采用前后端分離開發(fā)思路，我們知道，前端和后端交互有多中方式(服務(wù)器端渲染、Ajax、websocket等)，今天我們主要講解Ajax部分。

最近團(tuán)隊討論了一下，Ajax 本身跟 Vue 并沒有什么需要特別整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的價值和其維護(hù)成本相比并不劃算，所以決定在不久以后取消對 vue-resource 的官方推薦。已有的用戶可以繼續(xù)使用，但以后不再把 vue-resource 作為官方的 ajax 方案。

vue更新至2.0之后，官方推薦的Ajax插件庫是axios，而不再是vue-resource，理由如上。

axios快速使用

如何安裝請移步axios，文檔描述的很清楚。

常見用法

其實我們用的最多的就是get、post請求。

Performing a GET request

// get
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

Performing a POST request

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

掌握了以上兩種最基本的用法，我們已經(jīng)可以去進(jìn)行開發(fā)了。

示例demo

演示了如何使用axios請求cnode社區(qū)的API。

請點擊這里

axios的封裝

上一步已經(jīng)實現(xiàn)用axios請求網(wǎng)絡(luò)資源，那為什么要封裝axios呢？

以下幾點原因：

1. 配置通用項
2. 統(tǒng)一處理請求錯誤，進(jìn)行提示

完整源碼

請點擊這里

請求流程

請求失敗

通常請求失敗有兩種原因：

1. 網(wǎng)絡(luò)異常/服務(wù)器宕機(jī)
2. 后端拋出錯誤

每個后端在請求失敗時返回的數(shù)據(jù)結(jié)構(gòu)大同小異，前后端可以商量好，我的后臺返回給我的請求失敗接口如下：

{
 "status": 1,
 "msg": "購物車為空",
 "success": false
}

如果只是普通用法，如下所示：

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  // 處理響應(yīng)
  // 其中存在后端返回的錯誤
 })
 .catch(function (error) {
  // 網(wǎng)絡(luò)異常引發(fā)的錯誤
 });

我們知道，一般中大型規(guī)模的項目，請求是比較多的，這樣導(dǎo)致代碼冗余，會越來越臃腫，我們可以對錯誤進(jìn)行預(yù)處理。

攔截器

在普通用法中，then()處理響應(yīng)，catch()處理錯誤，通過攔截器，可以提前判斷，并返回二者之一。

這里并沒有在攔截器中對錯誤進(jìn)行處理，而是將響應(yīng)或者錯誤返回到get/post請求的結(jié)果中，通過鏈?zhǔn)教幚怼?/p>

// 請求時的攔截
axios.interceptors.request.use(function (config) {
  // 發(fā)送請求之前做一些處理
  return config;
 }, function (error) {
  // 當(dāng)請求異常時做一些處理
  return Promise.reject(error);
 });

// 響應(yīng)時攔截
axios.interceptors.response.use(function (response) {
  // 返回響應(yīng)時做一些處理
  return response;
 }, function (error) {
  // 當(dāng)響應(yīng)異常時做一些處理
  return Promise.reject(error);
 });

封裝get，post方法

封裝的get/post方法由3部分組成:

基本配置

包括請求方法，基礎(chǔ)url，相對url，參數(shù)，超時時間，請求頭等。

checkStatus()

鏈?zhǔn)教幚淼谝徊?，判斷http狀態(tài)碼是否正常，和攔截器一樣，請求正常則返回響應(yīng)，請求異常則返回錯誤，最后返回結(jié)果給checkCode()。

checkCode()

鏈?zhǔn)教幚淼诙?，處理上一步的結(jié)果，分別處理網(wǎng)絡(luò)異常，以及后端返回的異常。

在組件中引用

引入封裝后的axios

import http from '../utils/http'
import api from '../utils/api'

使用方法

fetchData: async function () {
   let params = {
   }
   const res = await http.get(api.right, params)
   if (res.data.success) {
    alert('請求成功')
   }
  }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前題目：詳解Vue2.0封裝axios筆記
網(wǎng)址分享：http://aaarwkj.com/article2/gppeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站營銷、做網(wǎng)站、網(wǎng)站內(nèi)鏈、小程序開發(fā)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)