axios配置
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配置的更多相关文章
- 谈谈axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件-axios. > 现在网上可能发送 ...
- 动态Axios配置
推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙.前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什 ...
- axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios.> 现在网上可能发送A ...
- 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ 2.安装cnpm: >: npm install -g cnpm --regis ...
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- axios配置大全
一.安装 1. 利用npm安装npm install axios --save 2. 利用bower安装bower install axios --save 3. 直接利用cdn引入<scrip ...
- vue-cli 3.0 使用axios配置跨域访问豆瓣接口
vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo 由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可, 在根目录下 ...
- axios配置及使用(发起请求时带上token)
1.安装 利用npm安装 npm install axios --save 2.引入即可使用 import axios from 'axios' 3.目录 4.各个文件设置: (1)env.js ex ...
- 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...
- 学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具
一.axios基本介绍 1.axios(前端最流行的 ajax 请求库) 特点: ① 基于 xhr + promise 的异步 ajax 请求库 ② 浏览器端/node 端都可以使用 ③ 支持请求/响 ...
随机推荐
- 关于Date
1.java DateUtil工具包可将"Wed, 21 Dec 2022 14:20:00 GMT"格式的字符串专程Date类型: Date expiration = DateU ...
- 状压dp,松鼠从起点出发,拿到所有坚果,然后返回起点,求最短时间。
UVA10944 松鼠从起点出发,拿到所有坚果,然后返回起点,求最短时间. #include<iostream> #include<cstdio> #include<al ...
- ffmpeg编码h264设置规格
ffmpeg -i demo.ts -profile:v baseline -vcodec h264 -acodec aac -f flv demo.flv
- R-CNN论文阅读摘要
论文链接: https://arxiv.org/pdf/1311.2524.pdf Abstract Our approach combines two key insights: (1) one c ...
- python3.6 列表推导式学习
a=[i for i in range(1,10) if i%2==0]print(a)c=[(x,y) for x in range(5) if x%2==0 for y in range(5) i ...
- Java线程池(Callable+Future模式)
转: Java线程池(Callable+Future模式) Java线程池(Callable+Future模式) Java通过Executors提供四种线程池 1)newCachedThreadPoo ...
- 自己的框架引入smarty的问题
这段时间自己学着写PHP的MVC框架,想把Smarty 作为view类加载, 可是自动加载它的时候就出错. 无论改文件名,还是改变路径,都无法解决问题, 我搜索一下相关问题,发现是自动加载Smarty ...
- Webupload+PHP上传大文件
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- 【HANA系列】对话SAP全球CEO孟鼎铭:未来最大的发展机遇属于中国中小企业
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]对话SAP全球CEO孟鼎铭:未来 ...
- Docker知识点总结
一. docker介绍: 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不 ...