import axios, { isCancel } from 'axios'
import { md5 } from 'vux'
import util from '@/libs/util'
import store from '../../store'
// 创建一个错误
function errorCreate (e) {
let err
if (typeof e === 'string') {
err = errorCreate(new Error(e))
} else {
err = {
name: e.name,
message: e.message,
stack: e.stack,
isCancel: isCancel(e)
}
}
return err
} // 组合conifg
function formarConfig (config) {
// 在请求发送之前做一些处理
const token = util.cookies.get('token')
const uid = util.cookies.get('uuid')
const { data, url } = config
return {
...config,
url: ((token && uid) && `${url}?uid=${uid}&token=${token}`) || url,
data: {
data,
apisign: md5(util.MD5_KEY + JSON.stringify(data))
}
}
} export const checkLogin = () => {
const token = util.cookies.get('token')
if (!token || token === 'undefined') {
return false
}
return true
} function createService (url) {
// 创建一个 axios 实例
const service = axios.create({
baseURL: url || process.env.VUE_BASE_URL,
timeout: 30000 // 请求超时时间,
}) // 请求拦截器
service.interceptors.request.use(
config => {
if (!config.forbidLoading) { } // 在请求发送之前做一些处理
config = formarConfig(config)
return config
},
error => {
Promise.reject(error)
}
) // 响应拦截器
service.interceptors.response.use(
response => {
// dataAxios 是 axios 返回数据中的 data
const dataAxios = response.data
// 这个状态码是和后端约定的
const { status } = dataAxios store.dispatch('cptwebsite/loading/closeLoading')
// 根据 code 进行判断
if (status === '1' || status === '1027') {
return [dataAxios.data, null, response]
} else {
if (status === '1010' || status === '1011') { }
return [dataAxios.data, errorCreate(`${dataAxios.info}`), dataAxios]
}
},
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
}
}
Promise.reject(error)
return Promise.resolve([null, errorCreate(error), error.response])
}
) return service
}
export default createService

  

axios配置的更多相关文章

  1. 谈谈axios配置请求头content-type

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件-axios. > 现在网上可能发送 ...

  2. 动态Axios配置

    推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙.前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什 ...

  3. axios配置请求头content-type

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios.> 现在网上可能发送A ...

  4. 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ ​ 2.安装cnpm: >: npm install -g cnpm --regis ...

  5. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  6. axios配置大全

    一.安装 1. 利用npm安装npm install axios --save 2. 利用bower安装bower install axios --save 3. 直接利用cdn引入<scrip ...

  7. vue-cli 3.0 使用axios配置跨域访问豆瓣接口

    vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo 由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可, 在根目录下 ...

  8. axios配置及使用(发起请求时带上token)

    1.安装 利用npm安装 npm install axios --save 2.引入即可使用 import axios from 'axios' 3.目录 4.各个文件设置: (1)env.js ex ...

  9. 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

    目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...

  10. 学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具

    一.axios基本介绍 1.axios(前端最流行的 ajax 请求库) 特点: ① 基于 xhr + promise 的异步 ajax 请求库 ② 浏览器端/node 端都可以使用 ③ 支持请求/响 ...

随机推荐

  1. 文本处理工具sed

    处理文本的工具sed  行编辑器 ,默认自带循环. sed是一种流编辑器,它一次处理一行内容. 功能:主要用来自动编辑一个或多个文件,简化对文件的反复操作,编写转换程序等 sed工具 用法: sed ...

  2. 使用UltraISO制作linux系统安装u盘启动盘

    1.首先打开UltraISO软件,尽量下载最新版的,小编曾用某个旧版的UltraISO,制作的安装盘,不能不能识别磁盘,安装失败! 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后 ...

  3. NUnit -- Test discovery or execution might not work for this project

    [7/31/2019 2:06:58.100 PM Warning] No test matches the given testcase filter `FullyQualifiedName=Sil ...

  4. 数据结构之双端队列(Deque)

    1,双端队列定义 双端队列:其两端都可以入列和出列的数据结构,如下图所示,队列后面(rear)可以加入和移出数据,队列前面(front)可以加入和移出数据 双端队列操作: deque=Deque() ...

  5. Selenium 2自动化测试实战41(多线程技术)

    多线程技术 python通过两个标准库thread和threading提供对线程的支持.thread提供了低级别的,原始的线程以及一个简单的锁.threading基于Java的线程模型设计. 1.th ...

  6. 线程池小结(JDK8)

    1.线程池的好处 降低资源消耗(重复利用已创建的线程减少创建和销毁线程的开销) 提高响应速度(无须创建线程) 提高线程的可管理性 2.相关类图 JDK5以后将工作单元和执行机制分离开来,工作单元包括R ...

  7. three.js后期之自定义shader通道实现扫光效果

    如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以 ...

  8. DP————LIS(最长上升子序列)和LCS(最长公共子序列)问题

    LIS问题 https://www.acwing.com/problem/content/898/ 思路:首先数组a中存输入的数(原本的数),开辟一个数组f用来存结果,最终数组f的长度就是最终的答案: ...

  9. 解决windows server 2019远程桌面许可证问题

    解决远程桌面许可证问题,你的远程桌面许可证出现问题,你的会话将在60分钟后断开. 最近装了台windows server 2019服务器做远程桌面连接,也安装了远程桌面许可证,但客户端远程连接时出现你 ...

  10. Leetcode之动态规划(DP)专题-714. 买卖股票的最佳时机含手续费(Best Time to Buy and Sell Stock with Transaction Fee)

    Leetcode之动态规划(DP)专题-714. 买卖股票的最佳时机含手续费(Best Time to Buy and Sell Stock with Transaction Fee) 股票问题: 1 ...