提示：在之前的文档中，我们已经解决了跨域问题。Vue解决跨域问题.

文章目录

一、为什么要封装接口？二、封装步骤1.创建request.js2.配置api文件3.vue文件中引用请求接口 总结

---

一、为什么要封装接口？

因为从开发到最终上线的过程中，API是需要经常更换的，为了我们更好的统一管理，所以需要将API封装起来。

二、封装步骤

1.创建request.js

在主目录下创建utils文件夹，并在其中新建request.js文件用于封装请求。

代码如下（示例）：

import axios from 'axios' import { Notification, MessageBox, Message } from 'element-ui' import errorCode from '@/utils/errorCode' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' // 创建axios实例 const service = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: process.env.VUE_APP_BASE_API, // 超时 timeout: 10000 }) // request拦截器，用于加token service.interceptors.request.use(config => { let token = localStorage.getItem('token'); if(token){ config.headers.common['Authorization'] = token; } return config }, error => { console.log(error) Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(res => { // 未设置状态码则默认成功状态 const code = res.data.code || 200; const status = res.status; // 获取错误信息 const msg = errorCode[code] || res.data.msg || errorCode['default'] || res.error || res.data.res; //获取错误提示 const ress = res.data.res; if (code === 401) { MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' } ).then(() => { location.href = '/Login'; localStorage.clear() }) } else if (code === 500 || status ===500) { if(ress){ Message({ message: ress, type: 'error' }) }else{ Message({ message: msg, type: 'error' }) } return Promise.reject(new Error(msg)) } else if (code !== 200 ) { if(ress){ Notification.error({ title: Notification.error({ title: ress }) }) }else{ Notification.error({ title: msg }) } return Promise.reject('error') } else { return res.data } }, error => { console.log('err' + error) let { message } = error; if (message == "Network Error") { message = "后端接口连接异常"; } else if (message.includes("timeout")) { message = "系统接口请求超时"; } else if (message.includes("Request failed with status code")) { message = "系统接口" + message.substr(message.length - 3) + "异常"; } Message({ message: message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service

request文件中引用的errorCode ：

export default { '401': '认证失败，无法访问系统资源', '403': '当前操作没有权限', '404': '访问资源不存在', 'default': '系统未知错误，请反馈给管理员' }

2.配置api文件

在主目录下创建api文件夹，根据需要新建login.js接口文件。

login.js代码如下：

import request from '@/utils/request' // 登录方法 export function login(data) { return request({ url: '/api/xing/login', method: 'post', params: data }) } // 获取用户详细信息 export function getInfo() { return request({ url: '/api/xing/getInfo', method: 'get' }) }

/api是proxyTable中配置的服务器的接口地址，详见Vue解决跨域问题。

---

3.vue文件中引用请求接口

login.vue代码如下：

import { login} from "@/api/login"; // 登录方法 onSubmit() { let params = { username: this.form.username, password: this.form.password, uuid: "", loginBody: "", }; login(params).then((response) => { if (response.code == 200) { this.$message.success(response.msg); localStorage.setItem("token", response.token); this.$router.push({ path: this.redirect || "/" }); } else { this.$message.error(response.msg); } }); }

/api是proxyTable中配置的服务器的接口地址，详见Vue解决跨域问题。

---

总结

总结： 以上就是今天要分享的内容，本文介绍了在vue中如何封装调用接口，而vue还有很多其他模块需要封装统一，需要我们大家共同分享。