vue axios 封裝
阿新 • • 發佈:2018-12-27
首先改變dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:3000"'//加入請求的域名
})
然後在src目錄下新建utlis,再在utlis下面新建request.js
import axios from 'axios' import router from '@/router/index' const service = axios.create({ // baseURL: process.env.BASE_API,如果使用上面配置好的會出現跨域 baseURL: '/api',//如果在config/index.js 中proxy已經做過代理配置就用代理地址 如果配置了baseURL 那麼會在請求的url最前面預設加上代表的內容 比如/api 代表http://127.0.0.1:3000, 請求中axios.get('/test') === axios.get('http://127.0.0.1:3000/test') timeout: 1000*120 }) // 請求攔截 service.interceptors.request.use( config => { if(token){//如果token有值才進行賦值 這個值可以是store裡面取 可以是本地快取取 config.headers.token = '12313213' } console.log('config:', config) //判斷token是否生效 return config }, error => { console.log(error) // for debug Promise.reject(error) } ) //響應攔截器即異常處理 service.interceptors.response.use(response => { console.log('攔截器裡面請求成功:', response) return response }, err => { console.log('請求失敗:', err.response.status) if (err && err.response) { switch (err.response.status) { case 400: err.response.message = '錯誤請求' break; case 401: err.response.message = '未授權,請重新登入' Router.replace({ path: '/login' }); break; case 403: err.response.message = '拒絕訪問' break; case 404: err.response.message = '請求錯誤,未找到該資源' break; case 405: err.response.message = '請求方法未允許' break; case 408: err.response.message = '請求超時' break; case 500: err.response.message = '伺服器端出錯' router.replace('/index')//跟 router.push 很像,唯一的不同就是,它不會向 history 新增新記錄,而是跟它的方法名一樣 —— 替換掉當前的 history 記錄 break; case 501: err.response.message = '網路未實現' break; case 502: err.response.message = '網路錯誤' break; case 503: err.response.message = '服務不可用' break; case 504: err.response.message = '網路超時' break; case 505: err.response.message = 'http版本不支援該請求' break; default: err.response.message = `連線錯誤${err.response.status}` } } else { err.response.message = "連線到伺服器失敗" } console.log('err:', err.response) return Promise.resolve(err.response) }) export default service
config/index.js proxy配置
proxyTable: {
'/api': {
target: 'http://127.0.0.1:3000', // 介面的域名
// secure: false, // 如果是https介面,需要配置這個引數
changeOrigin: true, // 如果介面跨域,需要進行這個引數配置
pathRewrite: {
'^/api': ''
}
}
},
接下來封裝我們的請求js,在src目錄下新建api資料夾,在api資料夾下面新建getData.js
import request from '../utlis/request' //模擬的一個get請求 export function fetchList(query) { return request({ url: '/test', method: 'get', params: query }) } export function upload(query) { return request({ url: '/upload', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, params: query }) }
最後就是在vue元件中引入使用
import {fetchList, upload} from '../api/testRequest'
export default {
async mounted(){
var res = await fetchList()
console.log('請求的值:', res)
}
}
總結:
1.攔截請求做token檢測,不用每個請求都去處理token
2.把請求集中管理,方便維護
3.對請求錯誤轉義