前段时间太忙(仍是本身太懒了),很久没写博客了,把最近的博客补上,今天聊聊vue接口的统一管理。
刚开始作vue项目的时候基本上每一个vue页面调用的接口都各自写在各自的页面里面,这样就会有重复的代码好比500,404等判断,这些基本的代码均可以抽象出来。
第一步 抽象出来request文件vue
import axios from 'axios' import { Message, Loading } from 'element-ui' let loadinginstace let baseUrlTemp = location.origin if (baseUrlTemp.includes('localhost')) { baseUrlTemp = '127.0.0.1:9952/api' } console.log('页面地址==', baseUrlTemp) // 建立axios实例 const service = axios.create({ baseURL: 'http://127.0.0.1:9952/api', // api 的 base_url // timeout: 5000, // 请求超时时间 withCredentials: true }) // request拦截器 service.interceptors.request.use( config => { // if (store.getters.token) { // config.headers['X-Token'] = getToken() // 让每一个请求携带自定义token 请根据实际状况自行修改 // } loadinginstace = Loading.service({ fullscreen: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0,0,0,0.6)' }) return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) } ) // response 拦截器 service.interceptors.response.use( response => { loadinginstace.close() /** * code为非200是抛错 可结合本身业务进行修改 */ if (response.status === 200) { const res = response.data if (res.code === '0' || res.code === 0) { return response.data } else { if (res.code === '401' || res.code === 401) { location.href = '/login' } else { res.message && Message({ message: res.message, type: 'error', duration: 3 * 1000 }) return response.data } } } }, error => { loadinginstace.close() var message = (error.response && error.response.data.message) || '' switch ((error.response && error.response.status) || 302) { case 400: break case 401: // message = "登陆已超时,请从新登陆" // if (!window.tipLock) { // window.tipLock = true // toLogin(error.response.data.loginUrl) // } location.href = error.response.data.loginUrl break case 403: message = '未受权请求' break case 404: message = '请求的资源不存在' break case 500: message = '服务器内部错误' break case 302: message = '请从新登陆' // toLogin(error.response.data.loginUrl) // location.replace(error.response.data.loginUrl) break } Message({ message: message || '未知错误', type: 'error', duration: 3 * 1000 }) return Promise.reject(error) } ) export default service
第二步根据业务不一样抽象出不一样的js,以user为例ios
import request from '@/utils/request' // 用户列表接口 export function userList (data) { console.log('用户列表传过来的参数' + JSON.stringify(data)) return request({ url: `/user/list`, method: 'post', data }) } // 删除用户 export function deleteUser (param) { console.log('删除用户传过来的参数' + JSON.stringify(param)) return request({ url: `/user/delete/` + param, method: 'delete' }) } export function saveOrUpdate (data) { console.log('新增或者更新用户传过来的参数' + JSON.stringify(data)) return request({ url: `/user/saveOrUpdate`, method: 'post', data }) } // 查询用户 export function getUserById (param) { console.log('查询用户传过来的参数' + JSON.stringify(param)) return request({ url: `/user/` + param, method: 'get' }) }
第三步,vue里面调用
首先引入jsweb
import {userList, deleteUser, getUserById} from '../../api/user'
而后在method中调用element-ui
listAllUser (pageNum) { pageNum = pageNum == null ? this.pageNum : pageNum console.log('---------' + pageNum) var userSearchDTO = {pageNum: pageNum == null ? this.pageNum : pageNum, pageSize: this.pageSize, name: this.input} userList(userSearchDTO).then(res => { // 注意: 经过 $http 获取到的数据,都在 result.body 中放着 let { code, data } = res if (code === 0) { // 成功了 this.list = data.list this.total = data.total this.pageSize = data.pageSize this.currentPage = data.pageNum console.log('用户列表查出来的数据' + JSON.stringify(data)) } }) },
这样就行了axios