vue專案中關於axios的二次封裝

vue專案開發時，為了對請求的資料做統一處理，如加loading，以及請求訊息提示提示等，需要對vue配套的axios進行二次封裝

//引入axios

import axios from 'axios'
// 使用element-ui message做訊息提醒
import from 'element-ui';
// 設定baseurl
= '/api'
//設定預設請求頭
axios.defaults.headers = 
// 設定請求過期時間
axios.defaults.timeout = 10000
//請求***
axios.interceptors.request.use(config => 
// 配置token
// if(token)
// }
return config
}, error => )
//響應***即異常處理
axios.interceptors.response.use(response => 
return response
}, error => `
} } else 
message.error(err.message)
return promise.resolve(error.response)
})export default ) )
.then(res => , err => )
})},
// post請求
post (url, param = {}) , err => )
})},
// put請求
put (url, param = {}) , err => )
})},
// delete
delete (url,param = {}), err => )
})}}
// 以上**的使用需要支援es6

vue專案中封裝axios

axios.defaults.timeout 100000 請求超時時間。請求位址 其實做到這裡也可以，不用去單獨封裝get post 等請求也可以直接呼叫的。然後就可以在vue頁面去呼叫了 mounted function then function response catch function...

vue專案中封裝axios

首先，配置axios 在專案src目錄下建立request.js import axios from axios import store from store import from ant design vue import from ant design vue import vue from...

vue專案中對axios的封裝

一 安裝npm install axios二 引入 一般我會在src目錄上建立乙個network資料夾 network資料夾中建立乙個config.js 用來封裝axios 和乙個api.js 用來統一管理介面 三 config.js 中配置axios 引入axios import axios fr...