// http.js import axios from 'axios' // 环境的切换 if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi' } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com' } // 请求拦截器 axios.interceptors.request.use( config => { token && (config.headers.Authorization = token) return config }, error => { return Promise.error(error) }) axios.defaults.timeout = 10000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 响应拦截器 axios.interceptors.response.use(response => { 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) } }) // 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请求 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 }) export const save = (data) => { return httpPost({ url: 'apps/wechat/api/save_member', data }) }
// .vue <script> import { getorglist } from '@/assets/js/api' export default { name: 'upload-card', data() {}, mounted() { getorglist({ id: 200 }).then(res => { // console.log(res) }) }, } </script>
为什么还要多封装一层promise,不直接返回axios。
我在这里统一做个说明：
当然可以直接返回axios.get().then(res=>res.data),写法更简洁些；个人编程习惯，感觉resolve(res.data)写法更优雅些,这个就见仁见智了，所以正文对这点先做保留。这篇笔记也是提供一个思路，仅供参考。小伙伴可以根据自己实际业务需求来选择。
以上所述是小编给大家介绍的vue中axios请求的封装详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: