设置接口请求前缀
节点环境变量用于做出判断，以区分开发、测试和生产环境。
if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com' } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com' }
在本地调试时，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域。
devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: { '/proxyApi': '' } } } }
设置请求头和超时
大多数情况下，请求头是固定的，只有在少数情况下，才需要一些特殊的请求头。这里，通用请求报头被用作基本配置。当需要一个特殊的请求头时，这个特殊的请求头作为一个参数传入，以覆盖基本配置。
const service = axios.create({ ... timeout: 30000, // 请求 30s 超时 headers: { get: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来 }, post: { 'Content-Type': 'application/json;charset=utf-8' // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来 } }, })
封装请求方法
首先引入封装的方法，然后在接口处将其重新封装成方法进行调用和公开。
// get 请求 export function httpGet({ url, params = {} }) { return new Promise((resolve, reject) => { axios.get(url, { params }).then((res) => { resolve(res.data) }).catch(err => { reject(err) }) }) } // post // post请求 export function httpPost({ url, data = {}, params = {} }) { return new Promise((resolve, reject) => { axios({ url, method: 'post', transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], // 发送的数据 data, // •url参数 params }).then(res => { resolve(res.data) }) }) }
将封装的方法放在api.js文件中。
import { httpGet, httpPost } from './http' export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })
您可以在页面中直接调用它
// .vue import { getorglist } from '@/assets/js/api' getorglist({ id: 200 }).then(res => { console.log(res) })
这样可以统一管理api，以后的维护和修改只需要在api.js文件中操作即可。
请求拦截器
请求拦截器可以为每个请求添加一个令牌，统一处理后便于维护。
// 请求拦截器 axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的 token && (config.headers.Authorization = token) return config }, error => { return Promise.error(error) })
响应拦截器
响应拦截器收到响应后，可以做一层操作，比如根据状态码判断登录状态和授权。
// 响应拦截器 axios.interceptors.response.use(response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { if (response.data.code === 511) { // 未授权调取授权接口 } else if (response.data.code === 510) { // 未登录跳转登录页 } else { return Promise.resolve(response) } } else { return Promise.reject(response) } }, error => { // 我们可以在这里对异常状态作统一处理 if (error.response.status) { // 处理请求失败的情况 // 对不同返回码对相应处理 return Promise.reject(error.response) } })
总结
- 打包是编程中非常有意义的手段。简洁的axios包装让我们领略到了它的魅力。
- axios的包装没有绝对的标准。只要你的包装能满足你的项目要求，使用方便，就是好的包装方案。
关于在vue项目中打包axios的方法的这篇文章到此为止。关于在Vue中打包axios的更多信息，请搜索www.adminjs.cn之前的文章或者继续浏览以下相关文章。我希望你将来能支持www.adminjs.cn！