資訊專欄INFORMATION COLUMN
摘要：給用戶以提示，在封裝對應的或者的時候把一些固定必傳的參數加上去，寫其他請求時加上改請求的其他參數就好了超時的設置，以及超時后的一些處理，是重新請求還是做其他操作。
import axios from "axios"
import qs from "qs"
import ErrorCode from "./error"http://封裝code錯誤時對應的提示
import router from "../router/index" //這里的router 請找你對應的router
import {
Message
} from "element-ui";
const service = axios.create({
baseURL: "http://localhost:3000", // 封裝請求地址的前綴
timeout: 5000 // 超時時間
})
封裝請求頭
service.interceptors.request.use(config => {
/**
* 請求之前判斷token是否存在或者過期，如果過期直接跳轉到登陸頁面，再次獲取token，在這里你還可以做其他判斷
* **/
if(!sessionStorage.getItem("token")) {
router.push("/Login")
}
if (config.method === "post") {
// 序列化,若是能直接接受json 格式,可以不用 qs 來序列化的
config.data = qs.stringify(config.data);
}
return config
}, error => {
loadinginstace.close()
Message.error({
message: "加載超時"
})
return Promise.reject(error)
})
封裝響應
service.interceptors.response.use(function (response) {
if(response.data.code != 200){ //這里約定后臺返回code為200時為正確的請求響應
Message.error({
message: `${ErrorCode[response.data.code]}`//這里code不是200的時候顯示自己封裝的錯誤code提示
})
}
return response.data
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
封裝post請求
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
let parms = {
token:"4552565215"
}
service.post(url,Object.assign(parms,data))//可以把你項目的必傳項又不會發生改變的例如token 封裝再這里就不用每次寫token了
.then(response => {
resolve(response);
}, err => {
reject(err)
})
.catch(res => {
console.log("超時處理",res)
})
})
}
ErrorCode示例
const ErrorCode = {
"100":"錯誤1",
"101":"錯誤2",
"102":"錯誤3",
"103":"錯誤4",
"104":"錯誤5",
}
export default ErrorCode
最后說說我理解的為什么要封裝axios
1.在請求攔截中先需要判斷一些必要的因素比如沒有token的話需要直接跳轉login頁面重新獲取。 2.默認前綴比如"http://baidu.com",然后上線之前使用本地的前綴，上線前改成你的線上地址再打包，當讓這里可以使用webpack的配置來判斷開發環境和生產環境使用不同地址。這個就看你自己了 3.在響應攔截中可以統一判斷返回的code顯示對應的錯誤信息。給用戶以提示， 4.在封裝對應的get或者post的時候把一些固定必傳的參數加上去，寫其他請求時加上改請求的其他參數就好了 5.超時的設置，以及超時后的一些處理，是重新請求還是做其他操作。 6.最后我能想到的也就這些，如有大佬路過可以指正隨便加以指點，萬分感謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99916.html
摘要：新建文件，設置請求攔截和處理的邏輯取消請求設置默認請求頭，如果不需要可以取消這一步請求超時的時間限制開始設置請求發起的攔截處理代表發起請求的參數的實體得到參數中的字段，用于決定下次發起請求，取消對應的相同字段的請求如果沒有就默認添加一個 1. 新建 axiosTool.js 文件，設置請求攔截和處理的邏輯 import Vue from vue import axios from ax...
摘要：新建文件，設置請求攔截和處理的邏輯取消請求設置默認請求頭，如果不需要可以取消這一步請求超時的時間限制開始設置請求發起的攔截處理代表發起請求的參數的實體得到參數中的字段，用于決定下次發起請求，取消對應的相同字段的請求如果沒有就默認添加一個 1. 新建 axiosTool.js 文件，設置請求攔截和處理的邏輯 import Vue from vue import axios from ax...
摘要：是一個基于的庫，可以用在瀏覽器和中。我在最近的幾個項目中都有使用，并基于根據常見的業務場景封裝了一個通用的服務。業務場景全局請求配置。請求攜帶，權限錯誤統一管理。 axios axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在前端框架中的應用也是特別廣泛，不管是vue還是react，都有很多項目用axios作為網絡請求庫。我在最近的幾個項...
摘要：攔截重復請求如何標識每個請求下面函數，通過一個請求參數中的請求傳遞參數或請求傳遞參數來表示每一個請求。 一直想封裝一下 axios， 可以方便項目中使用，今天有時間，就好好研究了一下。 源碼： // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...
閱讀 3128·2021-09-22 15:50
閱讀 3330·2021-09-10 10:51
閱讀 3142·2019-08-29 17:10
閱讀 2918·2019-08-26 12:14
閱讀 1835·2019-08-26 12:00
閱讀 932·2019-08-26 11:44
閱讀 652·2019-08-26 11:44
閱讀 2817·2019-08-26 11:41
