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

可能是vue中使用axios最詳細教程

 更新時間:2022年08月15日 10:05:29   作者:醉夢者  
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關于vue中使用axios最詳細教程的相關資料,需要的朋友可以參考下

前提條件:vue-cli 項目

安裝:

npm axios from 'axios'

較科學的封裝好的axios:(new-axios.js)

import?axios?from?'axios'
import?{?Notify?}?from?'vant';
//?import?Vue?from?'vue'
//?import?store?from?'@/store'? // 我此項目沒有用到vuex,所以vuex代碼的都注釋了,需要的自己打開使用

//?import?{ACCESS_TOKEN}?from?'@/store/mutation-types'

//?創(chuàng)建?axios?實例
const?requests?=?axios.create({
??baseURL:?process.env.VUE_APP_API,?// 基礎url,如果是多環(huán)境配置這樣寫,也可以像下面一行的寫死。
  // baseURL: 'http://168.192.0.123',
??timeout:?6000?//?請求超時時間
})

?
// 錯誤處理函數(shù)
const?err?=?(error)?=>?{
??if?(error.response)?{
????const?data?=?error.response.data
????//?const?token?=?Vue.ls.get(ACCESS_TOKEN)
????if?(error.response.status?===?403)?{
????????Notify({?type:?'danger',?message:?data.message||data.msg?});
????}
????if?(error.response.status?===?401)?{
????????Notify({?type:?'danger',?message:?'你沒有權限。'?});
??????//?if?(token)?{
??????//???store.dispatch('Logout').then(()?=>?{
??????//?????setTimeout(()?=>?{
??????//???????window.location.reload()
??????//?????},?1500)
??????//???})
??????//?}
????}
??}
??return?Promise.reject(error)
}

//?request?interceptor(請求攔截器)
requests.interceptors.request.use(config?=>?{
//???const?token?=?Vue.ls.get(ACCESS_TOKEN)
??const?token?=?localStorage.getItem('token')
??if?(token)?{
????config.headers['token']?=?token?//?讓每個請求攜帶自定義?token?請根據(jù)實際情況自行修改
??}
??return?config
},?err)

//?response?interceptor(接收攔截器)
requests.interceptors.response.use((response)?=>?{
??const?res?=?response.data
??if?(res.code?!==?0&&res.code!==200)?{?
????Notify({?type:?'danger',?message:?res.message||res.msg?});
????//?401:未登錄;
????if?(res.code?===?401||res.code?===?403||res.code===999)?{
??????Notify({?type:?'danger',?message:?'請登錄'});
????}
????return?Promise.reject('error')
??}?else?{
????return?res
??}
},?err)

export?default?{
??requests
}

main.js 引入,添加到vue原型

import requests from '@s/basejs/new-axios.js'   // 記得改為你的路徑
Vue.prototype.rq = requests  // 此處命名為rq,你可以改

使用

this.rq.get('/api/product/get?productChannelId='+this.productChannelId).then(res=>{
    console.log(res)
})

// 傳對象參數(shù)
// get請求記得加params
this.rq.get('/api/product/get,{params:{name:'abc'}}).then(res=>{
    console.log(res)
})

this.rq.post('/api/product/get,{name:'abc'}).then(res=>{
    console.log(res)
})

以下步驟一般不需要

開發(fā)環(huán)境如果要跨域,解決跨域問題(設置代理):vue-cli 3.0的在 package.json  同級目錄新建一個 vue.config.js 文件,加入下面代碼,其他版本找到配置文件的devServer加入代碼

module.exports = {
    //axios域代理,解決axios跨域問題
    baseUrl: '/',
    devServer: {
        proxy: {
            '': {
                target: 'http://192.168.0.108:8090',
                changeOrigin: true,
                ws: true,
                pathRewrite: {

                }
            }
        }
    }
}

修改完后記得重啟項目應用配置

總結

到此這篇關于vue中使用axios最詳細教程的文章就介紹到這了,更多相關vue使用axios教程內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 詳解Vue 全局變量,局部變量

    詳解Vue 全局變量,局部變量

    這篇文章主要介紹了Vue全局變量局部變量,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • Vue組件設計-滾動置頂設計案例

    Vue組件設計-滾動置頂設計案例

    這篇文章主要介紹了Vue組件設計-滾動置頂設計案例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法

    vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法

    下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 如何去掉ElementUI Table的hover變色問題

    如何去掉ElementUI Table的hover變色問題

    這篇文章主要介紹了如何去掉ElementUI Table的hover變色問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue項目中使用axios遇到的相對路徑和絕對路徑問題

    vue項目中使用axios遇到的相對路徑和絕對路徑問題

    這篇文章主要介紹了vue項目中使用axios遇到的相對路徑和絕對路徑問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue代理和跨域問題的解決

    vue代理和跨域問題的解決

    這篇文章主要介紹了vue代理和跨域問題的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue3警告:Failed to resolve component:XXX的詳細解決辦法

    Vue3警告:Failed to resolve component:XXX的詳細解決辦法

    最近在一個vue3項目中遇到了報錯,整理了些解決辦法,這篇文章主要給大家介紹了關于Vue3警告:Failed to resolve component:XXX的詳細解決辦法,文中介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • vue大型項目之分模塊運行/打包的實現(xiàn)

    vue大型項目之分模塊運行/打包的實現(xiàn)

    這篇文章主要介紹了vue大型項目之分模塊運行/打包的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • Element UI框架中巧用樹選擇器的實現(xiàn)

    Element UI框架中巧用樹選擇器的實現(xiàn)

    這篇文章主要介紹了Element UI框架中巧用樹選擇器的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue3如何將通用組件注冊成全局組件

    vue3如何將通用組件注冊成全局組件

    這篇文章主要介紹了vue3將通用組件注冊成全局組件的方法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08

最新評論