目录
axios请求的封装，Vue、React都可使用
UI框架
PC端
这里Vue推荐使用Element-UI，React推荐使用antd，都是热门的UI库，功能文档都很丰富
移动端
这里Vue推荐使用Vant，React推荐使用Ant Design Mobile
为了保证代码的可维护性以及模块化开发，首先项目初始化完成后在src目录下创建一个server的目录，这里面的文件就都是我们请求相关的文件了，我们页面组件就只用调取导出的函数返回值即可。
api.js就是我们请求的主要代码 apiIp.js和apiURL.js是React需要用到的，用来根据环境创建不同的baseURL，Vue下不需要这个，因为它已经帮你写好的config，只需要你去填写即可。 http.js是我们项目的各个请求，相当于一个记事本。把所 有的请求都放入里面，暴露函数，让组件来调用。
下面代码都以PC端为标准，移动端只是修改函数及调用方法即可。React
apiIp.js
//对外提供的服务地址 export const publicIp = process.env.NODE_ENV === development ? : //对外提供获取图片的地址 export const logoImgIp = process.env.NODE_ENV === development ? : // 登录路由 export const LOGIN =api.js
import axios from "axios"; import {publicIp} from ./apiIp import {LOGIN} from ./apiURL import {message} from antd let hide = null const instance = axios.create({//创建axios实例，在这里可以设置请求的默认配置 timeout: 10000, // 设置超时时间10s baseURL: publicIp //根据自己配置的反向代理去设置不同环境的baeUrl }) // 文档中的统一设置post请求头。下面会说到post请求的几种Content-Type instance.defaults.headers.post[Content-Type] = application/json let httpCode = {//这里我简单列出一些常见的http状态码信息，可以自己去调整配置 400: 请求参数错误, 401: 权限不足, 请重新登录, 403: 服务器拒绝本次访问, 404: 请求资源未找到, 500: 内部服务器错误, 501: 服务器不支持该请求中使用的方法, 502: 网关错误, 504: 网关超时 } /** 添加请求拦截器 **/ instance.interceptors.request.use(config => { config.headers[token] = sessionStorage.getItem(token) || hide = message.loading({content: Loading..., duration: 0}); // 在这里：可以根据业务需求可以在发送请求之前做些什么:例如我这个是导出文件的接口，因为返回的是二进制流，所以需要设置请求响应类型为blob，就可以在此处设置。 if (config.url.includes(pur/contract/export)) { config.headers[responseType] = blob } // 我这里是文件上传，发送的是二进制流，所以需要设置请求头的Content-Type if (config.url.includes(pur/contract/upload)) { config.headers[Content-Type] = multipart/form-data } return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) /** 添加响应拦截器**/ instance.interceptors.response.use(response => { hide() if (response.statusText === ok) { // 响应结果里的statusText: ok是我与后台的约定，大家可以根据实际情况去做对应的判断 return Promise.resolve(response.data) } else { message.error(响应超时) return Promise.reject(response.data.message) } }, error => { hide() if (error.response) { // 根据请求失败的http状态码去给用户相应的提示 let tips = error.response.status in httpCode ? httpCode[error.response.status] : error.response.data.message message.error(tips) if (error.response.status === 401) {// token或者登陆失效情况下跳转到登录页面，根据实际情况，在这里可以根据不同的响应错误结果，做对应的事。这里我以401判断为例 //针对框架跳转到登陆页面 this.props.history.push(LOGIN); } return Promise.reject(error) } else { message.error(请求超时, 请刷新重试) return Promise.reject(请求超时, 请刷新重试) } }) /* 统一封装get请求 */ export const get = (url, params, config = {}) => { return new Promise((resolve, reject) => { instance({ method: get, url, params, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) } /* 统一封装post请求*/ export const post = (url, data, config = {}) => { return new Promise((resolve, reject) => { instance({ method: post, url, data, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }Vue
import axios from "axios"; import {Loading, Message} from element-ui let loadingInstance = null // 加载全局的loading const instance = axios.create({//创建axios实例，在这里可以设置请求的默认配置 timeout: 10000, // 设置超时时间10s baseURL: process.env.NODE_ENV === production ? : /api //根据自己配置的反向代理去设置不同环境的baeUrl }) // 文档中的统一设置post请求头。下面会说到post请求的几种Content-Type instance.defaults.headers.post[Content-Type] = application/json let httpCode = {//这里我简单列出一些常见的http状态码信息，可以自己去调整配置 400: 请求参数错误, 401: 权限不足, 请重新登录, 403: 服务器拒绝本次访问, 404: 请求资源未找到, 500: 内部服务器错误, 501: 服务器不支持该请求中使用的方法, 502: 网关错误, 504: 网关超时 } /** 添加请求拦截器 **/ instance.interceptors.request.use(config => { config.headers[token] = sessionStorage.getItem(token) || loadingInstance = Loading.service({ // 发起请求时加载全局loading，请求失败或有响应时会关闭 spinner: fa fa-spinner fa-spin fa-3x fa-fw, text: 拼命加载中... }) // 在这里：可以根据业务需求可以在发送请求之前做些什么:例如我这个是导出文件的接口，因为返回的是二进制流，所以需要设置请求响应类型为blob，就可以在此处设置。 if (config.url.includes(pur/contract/export)) { config.headers[responseType] = blob } // 我这里是文件上传，发送的是二进制流，所以需要设置请求头的Content-Type if (config.url.includes(pur/contract/upload)) { config.headers[Content-Type] = multipart/form-data } return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) /** 添加响应拦截器**/ instance.interceptors.response.use(response => { loadingInstance.close() if (response.statusText === ok) { // 响应结果里的statusText: ok是我与后台的约定，大家可以根据实际情况去做对应的判断 return Promise.resolve(response.data) } else { Message({ message: response.data.message, type: error }) return Promise.reject(response.data.message) } }, error => { loadingInstance.close() if (error.response) { // 根据请求失败的http状态码去给用户相应的提示 let tips = error.response.status in httpCode ? httpCode[error.response.status] : error.response.data.message Message({ message: tips, type: error }) if (error.response.status === 401) {// token或者登陆失效情况下跳转到登录页面，根据实际情况，在这里可以根据不同的响应错误结果，做对应的事。这里我以401判断为例 router.push({ path: `/login` }) } return Promise.reject(error) } else { Message({ message: 请求超时, 请刷新重试, type: error }) return Promise.reject(new Error(请求超时, 请刷新重试)) } }) /* 统一封装get请求 */ export const get = (url, params, config = {}) => { return new Promise((resolve, reject) => { instance({ method: get, url, params, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) } /* 统一封装post请求*/ export const post = (url, data, config = {}) => { return new Promise((resolve, reject) => { instance({ method: post, url, data, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }如果是在开发环境下，建议配置代理：
项目根目录/config/index.js替换
proxyTable: { /api: { target: , //代理url changeOrigin: true, pathRewrite: { ^/api: / } } },这里解释下/api是指只要是/api开头的url就做代理，target指向正在的url,^/api是一个正则，表示把/api用它对应的value替换掉，比如：
:8080/api/index/comment.json 替换为 :8080/index/comment.json这个根据自己项目的需求而变。