博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue axios 二次封装+BaseUrl打包后自定义+api接口封装
阅读量:5876 次
发布时间:2019-06-19

本文共 3323 字,大约阅读时间需要 11 分钟。

因项目分支较多,或者部署的服务器不确定,打包后方便发布者修改接口baseurl 将axios封装后,只需要修改创建的static/config.json(vue-cli2)或者pulice/config.json(cli3)文件修改配置即可适应不同的服务器地址

import axios from 'axios'import { Message } from 'element-ui'import router from '../router'// 创建一个错误function errorCreat (msg) {  const err = new Error(msg)  errorLog(err)  throw err}// 记录和显示错误function errorLog (err) {  // 打印到控制台  if (process.env.NODE_ENV === 'development') {    console.log(err)  }  // 显示提示  Message({    message: err.message,    type: 'error',    duration: 5 * 1000  })}export let service = {};let createService = (baseurl) => {    // 创建一个 axios 实例    service = axios.create({        // process.env.VUE_APP_API        baseURL: baseurl,    })// 请求拦截器service.interceptors.request.use(config => {    // 在请求发送之前做一些处理    // const token = util.cookies.get('token')    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改    // config.headers['X-Token'] = token    if(sessionStorage.getItem("token")){        config.url = config.url+"?token=" + sessionStorage.getItem("token");    }    return config},error => {    // 发送失败    console.log(error)    Promise.reject(error)})// 响应拦截器service.interceptors.response.use(response => {    // dataAxios 是 axios 返回数据中的 data    const dataAxios = response    // 这个状态码是和后端约定的    const { code } = dataAxios.data;    // 根据 code 进行判断    if (code === undefined) {    // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本    return dataAxios    } else {    // 有 code 代表这是一个后端接口 可以进行进一步的判断    switch (code) {        case 'success':        // [ 示例 ] code === 0 代表没有错误        return dataAxios.data;        case 'fail':        // [ 示例 ] 其它和后台约定的 code        errorCreat(dataAxios.data.message)        case '1000':        // [ 示例 ] 其它和后台约定的 code        router.replace({            path: '/login'        })        break        default:        // 不是正确的 code        errorCreat(`${dataAxios.msg}: ${response.config.url}`)        break    }    }},error => {    if (error && error.response) {    switch (error.response.status) {        case 400: error.message = '请求错误'; break        case 401: error.message = '未授权,请登录'; break        case 403: error.message = '拒绝访问'; break        case 404: error.message = `请求地址出错: ${error.response.config.url}`; break        case 408: error.message = '请求超时'; break        case 500: error.message = '服务器内部错误'; break        case 501: error.message = '服务未实现'; break        case 502: error.message = '网关错误'; break        case 503: error.message = '服务不可用'; break        case 504: error.message = '网关超时'; break        case 505: error.message = 'HTTP版本不受支持'; break        default: break    }    }    errorLog(error)    return Promise.reject(error)})}let startApp = function () {	var timestamp = (new Date()).getTime();    axios.get('/config.json?date='+timestamp).then((res) => {        // 基础地址        createService(res.data.BASE_URL);        window.baseURL = res.data.BASE_URL;        window.ossAddress  = res.data.ossAddress;        window.sysId  = res.data.sysId;        window.deleOssAddress  = res.data.deleOssAddress;    })}startApp();/**********************************api***********************************/import {service} from '@/axios'//表格数据export const indexTable  = (data) => {  return service({    url: '/platform/platformSelectGoodsOffer.do',    contentType : 'application/json;charset=UTF-8',    method: 'post',    data  })}复制代码

转载地址:http://qiuix.baihongyu.com/

你可能感兴趣的文章
如何使用Core Text计算一段文本绘制在屏幕上之后的高度
查看>>
==和equals区别
查看>>
2010技术应用计划
查看>>
XML 节点类型
查看>>
驯服 Tiger: 并发集合 超越 Map、Collection、List 和 Set
查看>>
Winform开发框架之权限管理系统改进的经验总结(3)-系统登录黑白名单的实现...
查看>>
Template Method Design Pattern in Java
查看>>
MVC输出字符串常用四个方式
查看>>
LeetCode – LRU Cache (Java)
查看>>
JavaScript高级程序设计--对象,数组(栈方法,队列方法,重排序方法,迭代方法)...
查看>>
【转】 学习ios(必看经典)牛人40天精通iOS开发的学习方法【2015.12.2
查看>>
nginx+php的使用
查看>>
在 ASP.NET MVC 中使用异步控制器
查看>>
SQL语句的执行过程
查看>>
Silverlight开发历程—动画(线性动画)
查看>>
详解Linux中Load average负载
查看>>
HTTP 协议 Cache-Control 头——性能啊~~~
查看>>
丢包补偿技术概述
查看>>
PHP遍历文件夹及子文件夹所有文件
查看>>
WinForm程序中两份mdf文件问题的解决
查看>>