資訊專欄INFORMATION COLUMN
摘要：廢話不多說，直接上代碼，本人也是菜雞如果有什么不對請指教為組件的插件按需引入。引入設(shè)置請求時(shí)間響應(yīng)攔截器如果返回的狀態(tài)碼為，說明請求數(shù)據(jù)成功注是我和公司后臺(tái)約定的狀態(tài)碼，具體的隨機(jī)應(yīng)變否則的話拋出錯(cuò)誤請求不存在封裝方法封裝請求
廢話不多說，直接上代碼，本人也是菜雞 如果有什么不對請指教~
ps: message為iview組件的插件 按需引入。
// 引入axios
import axios from "axios";
import { Message } from "iview"
import store from "./../store"
import router from "./../router"
if (process.env.NODE_ENV == "development") {
axios.defaults.baseURL = "/api";}
else if (process.env.NODE_ENV == "debug") {
axios.defaults.baseURL = "";
}
else if (process.env.NODE_ENV == "production") {
axios.defaults.baseURL = "./";
}
axios.defaults.timeout = 60000; //設(shè)置請求時(shí)間
// 響應(yīng)攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態(tài)碼為0000，說明請求數(shù)據(jù)成功(注：0000是我和公司后臺(tái)約定的狀態(tài)碼，具體的隨機(jī)應(yīng)變)
// 否則的話拋出錯(cuò)誤{
if(response.data.retCode != "0000"){
store.commit("common/defaultEntity", {
retCode: response.data.retCode,
retMsg: response.data.retMsg
})
router.push({ path: "/error"});
}
return Promise.resolve(response);
},
error => {
store.commit("common/defaultEntity", {
retCode: error.response.status,
retMsg: "請求不存在"
})
router.push({ path: "/error"});
return Promise.reject(error.response);
}
);
/**
* 封裝get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封裝post請求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data).then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103838.html
摘要：攔截重復(fù)請求如何標(biāo)識每個(gè)請求下面函數(shù)，通過一個(gè)請求參數(shù)中的請求傳遞參數(shù)或請求傳遞參數(shù)來表示每一個(gè)請求。 一直想封裝一下 axios， 可以方便項(xiàng)目中使用，今天有時(shí)間，就好好研究了一下。 源碼： // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...
摘要：對于第二種存儲(chǔ)方式，我們前端需要將其二進(jìn)制流交由對象處理，然后通過的生成臨時(shí)賦值給屬性來顯示。當(dāng)后端返回特定的圖片二進(jìn)制流的時(shí)候，就像我第一里的情景再現(xiàn)說的，前端用容器接收。 前言 作為前端工程師 de 我們，日常少不了會(huì)跟圖片打交道。在各大電商平臺(tái)工作的前端工程師們，感受可能會(huì)更加的明顯。 以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經(jīng)驗(yàn)。 一、情景再現(xiàn) 用postman請求接口...
摘要：對于第二種存儲(chǔ)方式，我們前端需要將其二進(jìn)制流交由對象處理，然后通過的生成臨時(shí)賦值給屬性來顯示。當(dāng)后端返回特定的圖片二進(jìn)制流的時(shí)候，就像我第一里的情景再現(xiàn)說的，前端用容器接收。 前言 作為前端工程師 de 我們，日常少不了會(huì)跟圖片打交道。在各大電商平臺(tái)工作的前端工程師們，感受可能會(huì)更加的明顯。 以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經(jīng)驗(yàn)。 一、情景再現(xiàn) 用postman請求接口...
摘要：對于第二種存儲(chǔ)方式，我們前端需要將其二進(jìn)制流交由對象處理，然后通過的生成臨時(shí)賦值給屬性來顯示。當(dāng)后端返回特定的圖片二進(jìn)制流的時(shí)候，就像我第一里的情景再現(xiàn)說的，前端用容器接收。 前言 作為前端工程師 de 我們，日常少不了會(huì)跟圖片打交道。在各大電商平臺(tái)工作的前端工程師們，感受可能會(huì)更加的明顯。 以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經(jīng)驗(yàn)。 一、情景再現(xiàn) 用postman請求接口...
閱讀 1735·2021-09-26 09:55
閱讀 1490·2021-09-23 11:22
閱讀 2830·2021-09-06 15:02
閱讀 2729·2021-09-01 11:43
閱讀 4173·2021-08-27 13:10
閱讀 3775·2021-08-12 13:24
閱讀 2150·2019-08-30 12:56
閱讀 3079·2019-08-30 11:22
