npm i axios 下載axios插件
main.js設定
import axios from 'axios'; //引入axios請求
axios.defaults.withCredentials=true; 為true是跨域時攜帶用戶用戶憑證 false不會攜帶用戶憑證
創建request.js檔案
import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
// var root = process.env.BASE_API
// 創建axios實體
const service = axios.create({
baseURL: '/manager', // api的base_url
timeout: 35000, // 請求超時時間
headers:{
'Account':localStorage.getItem("accountnumber"),
'Authorization':'Bearer '+localStorage.getItem("authorization"),
},
});
// request攔截器
// service.interceptors.request.use(config => {
// // if (store.getters.token) {
// // config.headers['Authorization'] = getToken(); // 讓每個請求攜帶自定義token 請根據實際情況自行修改
// // }
// config.url=root+config.url
// console.log(config.url)
// return config
// }, error => {
// // Do something with request error
// // console.log(error) // for debug
// // Promise.reject(error)
// })
// respone攔截器
let count = 0;
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code !== 200) {
// 401:未登錄;
if (res.code === 600) {
if(count==0){
MessageBox.confirm('該用戶訪問超時，請重新登錄', '訪問超時提示', {
confirmButtonText: '重新登錄',
cancelButtonText: '取消',
type: 'warning'
})
}
++count;
}else if(res.code===400){
MessageBox.alert(res.message,'提示',{
confirmButtonText:'好的',
type:'error'
})
return response;
}
else if(res.code===405){
MessageBox.alert('操作過于頻繁，請稍后操作','提示',{
confirmButtonText:'好的',
type:'error'
})
return response;
}
// return Promise.reject('error')
} else {
return response;
}
},
error => {
console.log(error);
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service
api統一管理 創建api.js
import request from '@/utils/request' //引入request檔案
//請求
export function 請求名() {
return request({
url:'',//請求地址后綴
method:'get', //設定請求方式 get post
})
}
//如果需要把引數放到請求地址上
export function 請求名(params) {
return request({
url:''+params,
method:'get',
})
}
//如果需要放固定引數
export function 請求名(params) {
return request({
url:'',
method:'get',
params:{引數名:params}
})
}
如果需要設定前端代理 創建vue.config.js檔案
module.exports = {
dev: {
assetsPublicPath: '/',
proxyTable: {
'/api': {
// target: `請求介面域名`,
changeOrigin: true,
pathRewrite: {
"^/api": '/'
}
}
},
}
特別注意
如果請求地址和前端頁面不在同一服務器 跨服務的情況下,需要nginx配置一下反向代理 不然介面請求會404找不到介面,這個需要給后端同志說明一下
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/256826.html
標籤：其他
上一篇：Android 原生語音播報
下一篇：Android集成友盟推送