vue 封装axios接口

1. 创建一个request.js文件

import axios from 'axios' import { MessageBox, Message } from 'element-ui' /** * @template axios请求封装 拦截 * @author daidai */ const service = axios.create({ withCredentials: false, // 跨域请求时是否需要使用凭证 baseURL: '/api', timeout: 5000 // request timeout }) /** * @template axios请求拦截器 * @author daidai 作者 * @param config 请求头信息 */ service.interceptors.request.use( config => { // 可以设置请求头和token信息 // const TOKEN = localStorage.getItem('Token') // // const TOKEN = 'sadwsasdasd' // if(TOKEN){ // config.headers['Content-Type'] = 'application/json'; // config.headers['Authorization'] = TOKEN; // } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) /** * @template 响应拦截器 * @author daidai 作者 * @param response 响应数据 */ service.interceptors.response.use( response => { const res = response.data // if the custom code is not 20000, it is judged as an error. if (res.code !== 20000) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // to re-login MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { location.reload(); }) } return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service

2. 在创建一个api.js文件

import request from '@/utils/request' import qs from 'qs' export function login(params) { return request({ url: '/login/', method: 'post', data: qs.stringify(params) }) }

3. 使用得时候:

import { login } from '../api/index' //引用接口文件 getInfo () { let obj = { uname: 'aaa', pwd: '123456' } login(obj).then(function (response) { console.log(response) }).catch(function (error) { console.log(error) }) }

好了可以用了;