Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）

更新時(shí)間：2021年05月02日 09:03:53 作者：柯曉楠

這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1、需求說(shuō)明

在使用Vue.js框架開(kāi)發(fā)前端項(xiàng)目時(shí)，會(huì)經(jīng)常發(fā)送ajax請(qǐng)求服務(wù)端接口，在開(kāi)發(fā)過(guò)程中，需要對(duì)axios進(jìn)一步封裝，方便在項(xiàng)目中的使用。

2、Vue項(xiàng)目結(jié)構(gòu)

在本地創(chuàng)建Vue項(xiàng)目，目錄結(jié)構(gòu)如下：

- public  靜態(tài)資源文件
- src
|- assets  靜態(tài)資源目錄
|- components 公共組件目錄
|- http   axios封裝目錄
|- router  路由管理目錄
|- store  狀態(tài)管理目錄
|- views  視圖組件目錄
|- App.vue  根組件
|- main.js  入口文件
- package.json  npm配置文件

在Vue項(xiàng)目中創(chuàng)建 http目錄作為axios的管理目錄，在 http目錄下兩個(gè)文件，分別是

/http/index.js 封裝axios方法的文件
/http/api.js 統(tǒng)一管理接口的文件

3、代碼示例

/http/api.js文件代碼如下：

export default {
    'users_add': '/users/add',
    'users_find': '/users/find',
    'users_update': '/users/update',
    'users_delete': '/users/delete'
}

/http/index.js文件代碼如下：

import axios from 'axios'
import api from './api'

//創(chuàng)建axios實(shí)例對(duì)象
let instance = axios.create({
    baseURL: 'http://localhost:3000', //服務(wù)器地址
    timeout: 5000 //默認(rèn)超時(shí)時(shí)長(zhǎng)
})

//請(qǐng)求攔截器
instance.interceptors.request.use(config=>{
    //此處編寫(xiě)請(qǐng)求攔截的代碼，一般用于彈出加載窗口
    console.log('正在請(qǐng)求……')
    return config
},err=>{
    console.error('請(qǐng)求失敗',err)
})

//響應(yīng)攔截器
instance.interceptors.response.use(res=>{
    //此處對(duì)響應(yīng)數(shù)據(jù)做處理
    console.log('請(qǐng)求成功！')
    return res //該返回對(duì)象會(huì)傳到請(qǐng)求方法的響應(yīng)對(duì)象中
},err=>{
    // 響應(yīng)錯(cuò)誤處理
    console.log('響應(yīng)失??！',err)
    // return Promise.reject(err);
})

//封裝axios請(qǐng)求方法，參數(shù)為配置對(duì)象
//option = {method,url,params} method為請(qǐng)求方法，url為請(qǐng)求接口，params為請(qǐng)求參數(shù)
async function http(option = {}) {
    let result = null
    if(option.method === 'get' || option.method === 'delete'){
     //處理get、delete請(qǐng)求
        await instance[option.method](
                api[option.url],
                {params: option.params}
          ).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }else if(option.method === 'post' || option.method === 'put'){
     //處理post、put請(qǐng)求
        await instance[option.method](
                api[option.url],
                option.params
            ).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }

    return result
}

export default http

在main.js入口文件中引入封裝好的 /http/index.js 文件，示例代碼如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './http'

Vue.config.productionTip = false
Vue.prototype.$http = http

Vue.use(Elementui)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在App.vue根組件中測(cè)試axios請(qǐng)求，示例代碼如下：

<template>
  <div>
    <button @click="getDate">發(fā)送請(qǐng)求</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    getDate(){
      this.$http({
        method: 'get',
        url: 'users_find'
      }).then(res=>{
        console.log(res)
      })

    }
  }
}
</script>

這里需要有 http://localhost:3000/users/find 接口，不然請(qǐng)求會(huì)失敗！

4、效果演示

啟動(dòng)Vue項(xiàng)目，在瀏覽器中訪問(wèn)Vue項(xiàng)目的地址，我的地址是 http://localhost:8080，點(diǎn)擊按鈕發(fā)送請(qǐng)求，獲取的結(jié)果如下圖所示。

到此，在Vue項(xiàng)目中就完成了簡(jiǎn)單的axios封裝，你也可以根據(jù)自己的實(shí)際需求對(duì)axios進(jìn)行封裝，本文只是提供參考。

到此這篇關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）的文章就介紹到這了,更多相關(guān)Vue封裝axios管理http請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: