欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios

 更新時(shí)間:2022年02月11日 10:04:52   作者:一定會(huì)去到彩虹海的麥當(dāng)  
axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

axios傳參

params與data傳參

  • params 傳參:參數(shù)以 k=v&k=v 格式放置在 url 中傳遞。

springboot后端可以使用@RequestParam注解接受請(qǐng)求,或者保證參數(shù)名跟k一樣時(shí)也可以接收到

只要是使用params傳參,無論是post請(qǐng)求還是get請(qǐng)求都是拼接都url中,此時(shí)的post請(qǐng)求也只是偽post請(qǐng)求

  • data傳參:參數(shù)被放在請(qǐng)求體中。

后端必須使用@RequestBody來接收,否則會(huì)接收不到,因?yàn)閍xios默認(rèn)傳遞的參數(shù)類型是application/json,會(huì)將其轉(zhuǎn)成json格式。

舉例:

vue中:

export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: {"loginId":account,"password":password,"orgType":orgType}
)}

則會(huì)轉(zhuǎn)成json格式放入請(qǐng)求體中

如果后端中想這樣接收,是接收不到的,因?yàn)榇藭r(shí)后端的接收格式是application/x-www-form-urlencoded

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

如果我們使用data傳參,但后端不想使用@RequesBody的方式來接收,那怎么處理呢?

首先要設(shè)置請(qǐng)求頭

headers: {
    //關(guān)鍵
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}

直接拼接成k=v

適用參數(shù)較少的情況

export function login(account, password, orgType) {return request({
    url: '/webapi/login',
    method: 'post',
    data: "loginId="+account+ "&password="+password+"&orgType="+orgType
  })
}

使用qs實(shí)現(xiàn) json 對(duì)象的 k=v 格式化

適用參數(shù)較多的情況

安裝qs : npm install qs

import qs form 'qs'

export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: qs.stringify({"loginId":account, "password":password,"orgType":orgType})
  })
}

這樣后端就可以這樣接收了:

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

封裝axios

設(shè)置request攔截器,可以在這里添加token,這樣每次發(fā)起請(qǐng)求時(shí)都會(huì)攜帶token了

設(shè)置響應(yīng)攔截器,根據(jù)后端的狀態(tài)碼進(jìn)行相應(yīng)處理,比如但發(fā)現(xiàn)token失效后,就跳轉(zhuǎn)到登錄頁面等

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // axios中請(qǐng)求配置有baseURL選項(xiàng),表示請(qǐng)求URL公共部分
  baseURL: "http://localhost:8082",
  // 超時(shí)
  timeout: 10000
})
// request攔截器
service.interceptors.request.use(config => {
  // 是否需要設(shè)置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 響應(yīng)攔截器
service.interceptors.response.use(res => {
    // 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
    const code = res.data.code || 200;
    // 獲取錯(cuò)誤信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm('登錄狀態(tài)已過期,您可以繼續(xù)留在該頁面,或者重新登錄', '系統(tǒng)提示', {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口連接異常";
    }
    else if (message.includes("timeout")) {
      message = "系統(tǒng)接口請(qǐng)求超時(shí)";
    }
    else if (message.includes("Request failed with status code")) {
      message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

使用

import request from './request'

export function apiLogin(data){
    return request({
        url:'/user/login',
        method:'post',
        data:data
    })
}

參考鏈接:http://www.dbjr.com.cn/article/237137.htm

總結(jié)

到此這篇關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的文章就介紹到這了,更多相關(guān)vue優(yōu)雅使用axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 淺談Vue中的this.$store.state.xx.xx

    淺談Vue中的this.$store.state.xx.xx

    這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2021-09-09
  • Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式

    Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式

    這篇文章主要介紹了Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue3中使用@vueuse/core中的圖片懶加載案例詳解

    vue3中使用@vueuse/core中的圖片懶加載案例詳解

    這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • Vuex的使用及知識(shí)點(diǎn)筆記

    Vuex的使用及知識(shí)點(diǎn)筆記

    這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue中插值表達(dá)式使用的示例詳解

    vue中插值表達(dá)式使用的示例詳解

    Vue的插值表達(dá)式是一種特殊的語法,用于在模板中動(dòng)態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號(hào) ("{{ }}")將表達(dá)式包裹起來,下面我們就來根據(jù)三個(gè)案例來深入了解下插值表達(dá)式的使用吧
    2023-11-11
  • Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)

    Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)

    這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • vue?退出登錄?清除localStorage的問題

    vue?退出登錄?清除localStorage的問題

    這篇文章主要介紹了vue?退出登錄?清除localStorage的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue路由前后端設(shè)計(jì)總結(jié)

    Vue路由前后端設(shè)計(jì)總結(jié)

    在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計(jì)的知識(shí)點(diǎn)總結(jié)內(nèi)容,需要的朋友們參考下。
    2019-08-08
  • Vue混合文件使用以及ref的引用實(shí)例詳解

    Vue混合文件使用以及ref的引用實(shí)例詳解

    ref用來輔助開發(fā)者在不依賴于jQuery的情況下,獲取DOM元素或組件的引用,下面這篇文章主要給大家介紹了關(guān)于Vue混合文件使用以及ref的引用的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇

    element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇

    本文主要介紹了element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01

最新評(píng)論