axios的簡單二次封裝

2021-10-09 10:30:09 字數 1495 閱讀 9590

為什麼進行封裝?

a.統一配置http請求baseurl,超時配置,請求頭配置。。

b.可以劫持劫持響應,劫持請求,新增全域性載入提示,新增header鑑權,響應錯誤統一處理

c.擴充套件簡化axios方法jsonp, posturl

import axios from 'axios'

// 匯入axios

import from 'vant';

// 設定基礎url

import qs from 'qs';//-s

// qs把物件轉換為url編碼形式

// process.env.node_env 當前的執行環境是production

// process 處理 env環境 node nodejs env 環境

// 當前的執行環境如果是線上 就業採用網域名稱 作為所有請求的預設網域名稱,如果開發環境則設定另外乙個

// 建立乙個axios例項

let request = axios.create()

// 請求 攔截請求 新增token ,新增載入提示

// interceptors ***

// request 攔截請求 use 使用

// config 請求配置 headers 請求頭

// sessionstorage.getitem 本地會話儲存

request.interceptors.request.use(

config=>);

config.headers.token = sessionstorage.getitem("token");

return config

})// 思考:指定載入提示,才提示,指定提示文字

// 響應攔截

request.interceptors.response.use(

res=>

) // 定義乙個post方法 url 位址 data 資料

// 自動把物件轉換為 url編碼

// 新增了headers 頭資訊

request.posturl=function(url,data))

.then(res=>resolve(res))

.catch(err=>reject(err))

})}export default request;

// 匯出request

// 為什麼需要二次封裝 axios

// 1. 請求與響應攔截 請求前新增 loading,請求完畢移除loading

// 每個請求都要新增 token auth等許可權憑據

// 2. 統一配置 :基本網域名稱

// 3. 二次封裝一些方法,jsonp posturl

axios二次封裝

引入路由 import router from router index 引入vuex import store from store index 引入提示元件 import from element ui 引入api import apilist from apilist 引入qs let htt...

axios二次封裝

axios封裝 axios請求 axios二次封裝 封裝公共請求 123 4567 891011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 import axios from axios import from element ui...

幾種簡單的axios二次封裝

簡單的封裝 get方法 我們通過定義乙個get函式,get函式有兩個引數,第乙個引數表示我們要請求的url位址,第二個引數是我們要攜帶的請求引數。get函式返回乙個promise物件,當axios其請求成功時resolve伺服器返回 值,請求失敗時reject錯誤值。最後通過export丟擲get函...