亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

axios二次封裝

pakolagij / 3153人閱讀

摘要：給用戶以提示，在封裝對應(yīng)的或者的時候把一些固定必傳的參數(shù)加上去，寫其他請求時加上改請求的其他參數(shù)就好了超時的設(shè)置，以及超時后的一些處理，是重新請求還是做其他操作。

import axios from "axios"
import qs from "qs"
import ErrorCode from "./error"http://封裝code錯誤時對應(yīng)的提示
import router from "../router/index" //這里的router 請找你對應(yīng)的router
import {
  Message
} from "element-ui";
const service = axios.create({
  baseURL: "http://localhost:3000", // 封裝請求地址的前綴
  timeout: 5000 // 超時時間
})

封裝請求頭

service.interceptors.request.use(config => {
    /**
     * 請求之前判斷token是否存在或者過期，如果過期直接跳轉(zhuǎn)到登陸頁面，再次獲取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)
})

封裝響應(yīng)

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //這里約定后臺返回code為200時為正確的請求響應(yīng)    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//這里code不是200的時候顯示自己封裝的錯誤code提示
      })      
    }
        return response.data
    }, function (error) {
        // 對響應(yīng)錯誤做點什么
    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))//可以把你項目的必傳項又不會發(fā)生改變的例如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的話需要直接跳轉(zhuǎn)login頁面重新獲取。
2.默認(rèn)前綴比如"http://baidu.com",然后上線之前使用本地的前綴，上線前改成你的線上地址再打包，當(dāng)讓這里可以使用webpack的配置來判斷開發(fā)環(huán)境和生產(chǎn)環(huán)境使用不同地址。這個就看你自己了
3.在響應(yīng)攔截中可以統(tǒng)一判斷返回的code顯示對應(yīng)的錯誤信息。給用戶以提示，
4.在封裝對應(yīng)的get或者post的時候把一些固定必傳的參數(shù)加上去，寫其他請求時加上改請求的其他參數(shù)就好了
5.超時的設(shè)置，以及超時后的一些處理，是重新請求還是做其他操作。
6.最后我能想到的也就這些，如有大佬路過可以指正隨便加以指點，萬分感謝！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99916.html

相關(guān)文章

  • 二次封裝axios，根據(jù)參數(shù)來實現(xiàn)多個請求多次攔截

    摘要：新建文件，設(shè)置請求攔截和處理的邏輯取消請求設(shè)置默認(rèn)請求頭，如果不需要可以取消這一步請求超時的時間限制開始設(shè)置請求發(fā)起的攔截處理代表發(fā)起請求的參數(shù)的實體得到參數(shù)中的字段，用于決定下次發(fā)起請求，取消對應(yīng)的相同字段的請求如果沒有就默認(rèn)添加一個 1. 新建 axiosTool.js 文件，設(shè)置請求攔截和處理的邏輯 import Vue from vue import axios from ax...

    MoAir 評論0 收藏0

  • 二次封裝axios，根據(jù)參數(shù)來實現(xiàn)多個請求多次攔截

    摘要：新建文件，設(shè)置請求攔截和處理的邏輯取消請求設(shè)置默認(rèn)請求頭，如果不需要可以取消這一步請求超時的時間限制開始設(shè)置請求發(fā)起的攔截處理代表發(fā)起請求的參數(shù)的實體得到參數(shù)中的字段，用于決定下次發(fā)起請求，取消對應(yīng)的相同字段的請求如果沒有就默認(rèn)添加一個 1. 新建 axiosTool.js 文件，設(shè)置請求攔截和處理的邏輯 import Vue from vue import axios from ax...

    gclove 評論0 收藏0

  • axios基于常見業(yè)務(wù)場景的二次封裝

    摘要：是一個基于的庫，可以用在瀏覽器和中。我在最近的幾個項目中都有使用，并基于根據(jù)常見的業(yè)務(wù)場景封裝了一個通用的服務(wù)。業(yè)務(wù)場景全局請求配置。請求攜帶，權(quán)限錯誤統(tǒng)一管理。 axios axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在前端框架中的應(yīng)用也是特別廣泛，不管是vue還是react，都有很多項目用axios作為網(wǎng)絡(luò)請求庫。我在最近的幾個項...

    JasinYip 評論0 收藏0

  • axios 的二次封裝（攔截重復(fù)請求、異常統(tǒng)一處理）

    摘要：攔截重復(fù)請求如何標(biāo)識每個請求下面函數(shù)，通過一個請求參數(shù)中的請求傳遞參數(shù)或請求傳遞參數(shù)來表示每一個請求。 一直想封裝一下 axios， 可以方便項目中使用，今天有時間，就好好研究了一下。 源碼： // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...

    luzhuqun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<