Vue全域性封裝axios請求

一、 簡介

使用vue開發專案時，資料請求不再使用原生的ajax來請求資料，vue官方庫提供的vue-resource已經不再更新和維護，現在新專案基本都以axios作為主要請求方式；

二、使用

本例以post單例請求為例

axios().then(res => ).catch(err => )

分析：axios是乙個基於promise的http請求客戶端，正式開發過程中我們需要再次對axios進行二次封裝，方便我們全域性使用aixos請求資料、並且處理各種後台返回的狀態用於提示使用者錯誤資訊；

首先在src目錄下建立用於封裝axios的js檔案，並匯出

目錄：

**塊：

----

------

引入 ----

------

import axios from 'axios'            //引入axios

import router from './router' //引入路由
import from 'element-ui' //引入elementui-message

------

封裝  

----

------

export function post(obj) ).then(res => 

resolve(res) //新promise物件例項（成功）
}).catch(err => )
break;
case 401:
message()
localstorage.removeitem("token")
router.push();
break;
case 500:
message()
break;
default: //不在上述範圍內的錯誤處理
message()
}reject(err) //新promise物件例項（失敗）
})})
}

------

請求攔截 

----

------

axios.interceptors.request.use(function (config) 

return config
}, function (error) )

------

封裝 彈框提示 

----

------

function successstate(res) )

return
} else if (res.data.code == "0001") )
return} }
//.........更多........
}

------

呼叫 ----

------

import  from '../request' //匯入post函式

created() ,
methods: ).then(res => );},}

------

成功 ----

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...

vue封裝axios請求

新建檔案src utils request.js import axios from axios 自定義配置建立axios的新例項 const service axios.create 無論請求為何種型別，在params中的屬性都會以key value的格式在urlzhong拼 headers 請求...

Vue封裝axios請求

為了方便呼叫api介面，我們封裝axios請求 並在api資料夾中建立兩個兩個js檔案 http.js api.js http.js檔案中寫入 import axios from axios axios.defaults.baseurl axios.defaults.timeout 1000000 ...