nuxtjs中如何對(duì)axios二次封裝

更新時(shí)間：2023年10月12日 08:49:03 作者：Lsir1998

這篇文章主要介紹了nuxtjs中如何對(duì)axios二次封裝問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

nuxtjs中對(duì)axios二次封裝

plugins文件夾新建request.js

import { Message} from "element-ui";
export default function ({ $axios,redirect,$cookies}) {
    //請(qǐng)求域名
    if(process.env.NODE_ENV == 'development'){
        $axios.baseURL = '';
    }else if(process.env.NODE_ENV == 'debug'){
        $axios.baseURL = '';
    }else if(process.env.NODE_ENV == 'product'){
        $axios.baseURL = '';
    }
    $axios.onRequest(config => {
        //此處的$cookies為cookie-universal-nuxt,當(dāng)然也可以使用其它的緩存工具類(lèi)
        //loginInfo 是登錄態(tài)
        const loginInfo = $cookies.get('loginInfo')  
         //區(qū)分axios的post請(qǐng)求和其它請(qǐng)求  因?yàn)閜ost請(qǐng)求為data參數(shù)而get則為params參數(shù)
        if(config.method == 'post'){
            if(loginInfo && config.data){
            //Object.assig為合并對(duì)象，將token和其它參數(shù)合并，當(dāng)然和接口文檔有關(guān)，有的是要求                                            
            //token放在請(qǐng)求頭中的，依據(jù)接口文檔而定
                config.data = Object.assign(config.data,loginInfo)
            }
        }else{
            if(loginInfo && config.params){
                config.params = Object.assign(config.params,loginInfo)
            }
        }
        return config
    })
    $axios.onResponse(response => {
        if(process.server){ //判斷是服務(wù)端還是客戶(hù)端的請(qǐng)求
            return response.data
        }
        //狀態(tài)碼依接口文檔而定
        if(!process.server && response.data.code == '401'){
            return Message({
                type:'error',
                message:'您還未登錄',
                duration:1500
            })
        }
        if(!process.server && response.data.code == '400'){
            Message({
                type:'error',
                message:response.data.msg,
                duration:1500
            })
            return response.data
        }
        if(!process.server && response.data.code == '404'){
            Message({
                type:'error',
                message:response.data.msg,
                duration:1500
            })
            return response.data
        }
        if(!process.server && response.data.code == '200'){
            return response.data
        }
    })
    $axios.onRequestError(err => {
        console.log(err)
    })
    $axios.onResponseError(err => {
        console.log(err)
    })
    $axios.onError(error => {
        const code = parseInt(error.response && error.response.status)
        if (code === 400) {
            redirect('/')
        }
    })
}

對(duì)api進(jìn)行同一管理，在plugins文件夾下新建api.js

export default ({$axios},inject) => {
     inject('base',(params)=>$axios({
        url:'/appapi/config/base',
        method:'GET',
        params
    }))
    //多個(gè)可以繼續(xù)往后寫(xiě)inject，inject第一個(gè)參數(shù)隨便取名
}

在nuxt.config.js中配置

export default {
    plugins: [
    '@/plugins/request',
    '@/plugins/api',
  ],
}

在頁(yè)面組件中使用方法

export default{
    async asyncData(app){
        const list = await app.$base({})
    },
    //methods中使用可以通過(guò)this.$base({})
}

axios二次封裝，設(shè)置請(qǐng)求、響應(yīng)攔截器

axios的攔截器非常好用，分為請(qǐng)求攔截器與響應(yīng)攔截器兩種,一般把攔截器卸載api文件下的xxx.js下，

xxx.js中配置，二次封裝

//對(duì)于axios進(jìn)行二次封裝
import axios from 'axios'
//主要是要用到他的請(qǐng)求和攔截器(為什么要二次封裝)
//1.利用axios對(duì)象的方法create,去創(chuàng)建一個(gè)axios實(shí)例
//2.request就是axios,只不過(guò)稍微配置一下
const requests = axios.create({
    //配置對(duì)象
    baseUrl:'/api',   //基礎(chǔ)路徑,發(fā)送請(qǐng)求時(shí)候,代表基于哪個(gè)路徑出現(xiàn)api
    //代表請(qǐng)求的時(shí)間
    timeout:5000,
})

對(duì)axios函數(shù)配置了一下，下面可以直接用requests,寫(xiě)攔截器

//1.利用axios對(duì)象的方法create,去創(chuàng)建一個(gè)axios實(shí)例

//2.request就是axios,只不過(guò)稍微配置一下

1.請(qǐng)求攔截器,在發(fā)請(qǐng)求之前，請(qǐng)求攔截器可以監(jiān)測(cè)到,可以在請(qǐng)求發(fā)出去之前做一些事情

requests.interceptors.request.use((config)=>{
     //config 配置對(duì)象,對(duì)象里面有一個(gè)屬性很重要,headers請(qǐng)求
     return config
})

2.響應(yīng)攔截器：服務(wù)器相應(yīng)數(shù)據(jù)回來(lái)以后,響應(yīng)攔截器可以監(jiān)測(cè)到，可以做一些事情

 
//響應(yīng)攔截器
requests.interceptors.response.use((re)=>{
    //成功的回調(diào)函數(shù):服務(wù)器相應(yīng)數(shù)據(jù)回來(lái)以后,響應(yīng)攔截器可以監(jiān)測(cè)到，可以做一些事情
    return res.data;
},(error)=>{
    //響應(yīng)失敗的回調(diào)函數(shù)
    return Promise.reject(new Error('faile')) //終止Promise鏈子
})

最后對(duì)外暴露就完成了axios二次封裝，設(shè)置了兩個(gè)攔截器

export default requests;

ps完整代碼

//對(duì)于axios進(jìn)行二次封裝
import axios from 'axios'
//主要是要用到他的請(qǐng)求和攔截器(為什么要二次封裝)
//1.利用axios對(duì)象的方法create,去創(chuàng)建一個(gè)axios實(shí)例
//2.request就是axios,只不過(guò)稍微配置一下
const requests = axios.create({
    //配置對(duì)象
    baseUrl:'/api',   //基礎(chǔ)路徑,發(fā)送請(qǐng)求時(shí)候,代表基于哪個(gè)路徑出現(xiàn)api
    //代表請(qǐng)求的時(shí)間
    timeout:5000,
})
//請(qǐng)求攔截器,在發(fā)請(qǐng)求之前，請(qǐng)求攔截器可以監(jiān)測(cè)到,可以在請(qǐng)求發(fā)出去之前做一些事情
requests.interceptors.request.use((config)=>{
     //config 配置對(duì)象,對(duì)象里面有一個(gè)屬性很重要,headers請(qǐng)求
     return config
})
//響應(yīng)攔截器
requests.interceptors.response.use((re)=>{
    //成功的回調(diào)函數(shù):服務(wù)器相應(yīng)數(shù)據(jù)回來(lái)以后,響應(yīng)攔截器可以監(jiān)測(cè)到，可以做一些事情
    return res.data;
},(error)=>{
    //響應(yīng)失敗的回調(diào)函數(shù)
    return Promise.reject(new Error('faile')) //終止Promise鏈子
})
//對(duì)外暴露
export default requests;