成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

axios二次封裝

pakolagij / 3120人閱讀

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

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

封裝請(qǐng)求頭

service.interceptors.request.use(config => {
    /**
     * 請(qǐng)求之前判斷token是否存在或者過(guò)期，如果過(guò)期直接跳轉(zhuǎn)到登陸頁(yè)面，再次獲取token，在這里你還可以做其他判斷
     * **/
    if(!sessionStorage.getItem("token")) {
        router.push("/Login")
    }
    if (config.method === "post") {
      // 序列化,若是能直接接受json 格式,可以不用 qs 來(lái)序列化的
      config.data = qs.stringify(config.data);
    }    
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: "加載超時(shí)"
    })
    return Promise.reject(error)
})

封裝響應(yīng)

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //這里約定后臺(tái)返回code為200時(shí)為正確的請(qǐng)求響應(yīng)    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//這里code不是200的時(shí)候顯示自己封裝的錯(cuò)誤code提示
      })      
    }
        return response.data
    }, function (error) {
        // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
});

封裝post請(qǐng)求

   export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      let parms = {
        token:"4552565215"
      }
      service.post(url,Object.assign(parms,data))//可以把你項(xiàng)目的必傳項(xiàng)又不會(huì)發(fā)生改變的例如token 封裝再這里就不用每次寫token了
        .then(response => {
          resolve(response);
        }, err => {
          reject(err)
        })
        .catch(res => {
          console.log("超時(shí)處理",res)
        })
    })
  }

ErrorCode示例

const ErrorCode = {
    "100":"錯(cuò)誤1",
    "101":"錯(cuò)誤2",
    "102":"錯(cuò)誤3",
    "103":"錯(cuò)誤4",
    "104":"錯(cuò)誤5",
}
export default ErrorCode

最后說(shuō)說(shuō)我理解的為什么要封裝axios

1.在請(qǐng)求攔截中先需要判斷一些必要的因素比如沒(méi)有token的話需要直接跳轉(zhuǎn)login頁(yè)面重新獲取。
2.默認(rèn)前綴比如"http://baidu.com",然后上線之前使用本地的前綴，上線前改成你的線上地址再打包，當(dāng)讓這里可以使用webpack的配置來(lái)判斷開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境使用不同地址。這個(gè)就看你自己了
3.在響應(yīng)攔截中可以統(tǒng)一判斷返回的code顯示對(duì)應(yīng)的錯(cuò)誤信息。給用戶以提示，
4.在封裝對(duì)應(yīng)的get或者post的時(shí)候把一些固定必傳的參數(shù)加上去，寫其他請(qǐng)求時(shí)加上改請(qǐng)求的其他參數(shù)就好了
5.超時(shí)的設(shè)置，以及超時(shí)后的一些處理，是重新請(qǐng)求還是做其他操作。
6.最后我能想到的也就這些，如有大佬路過(guò)可以指正隨便加以指點(diǎn)，萬(wàn)分感謝！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99916.html

相關(guān)文章

  • 二次封裝axios，根據(jù)參數(shù)來(lái)實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截

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

    MoAir 評(píng)論0 收藏0

  • 二次封裝axios，根據(jù)參數(shù)來(lái)實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截

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

    gclove 評(píng)論0 收藏0

  • axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝

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

    JasinYip 評(píng)論0 收藏0

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

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

    luzhuqun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<