封裝axios方法之一
阿新 • • 發佈:2018-12-21
一、先來說說為什麼要封裝axios非同步請求。
我們前端開發中總是會遇到跨域的問題,我們會配置proxy來解決跨域的問題,無論是vue 還是react。
如何配置我這裡就不說了。
然後...然後我們就會遇到一個打包上線的問題,上線時候我們必須把字首拼接上,如果每個頁面都儲存一個路徑變數會很麻煩,所以我們會封裝axios來統一管理路徑,這樣可以使我們頁面請求變得更加簡潔。
程式碼如下
import axios from 'axios' import qs from 'qs' let http={ post:"", get:"" } // http://60.10.00.005:8080//方法一 統一攔截const Website=""; http.post= function (api,data){ let params = qs.stringify(data) return new Promise((resolve,reject) => { axios.post(`${Website}`+api,params).then((res) =>{ resolve(res) }) }) } http.get= function (api,data){ let params = qs.stringify(data)return new Promise((resolve,reject) => { axios.post(`${Website}`+api,params).then((res) =>{ resolve(res) }) }) }方法二單個請求定義 // export function _login(data){ // let params = qs.stringify(data) // return axios.post('/hrjc/mobile/login',params) // } export default http
個人偏愛方法一,因為方法一讓我感覺程式碼會比較乾淨吧。方法二需要每個請求都寫一次,顯得程式碼太冗餘了。
方法一用法如下
import http from '../server'; http.post("/login",{"loginName": userName,"password": password}) .then(function(response){} .catch(function(err){ console.log("失敗"+err); })
方法二同理使用,就是提出去一部分,
個人知識積累