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 端都可以使用 ③ 支持请求/响 ...
随机推荐
- arcgis python RefreshActiveView CLEAR_SELECTION
import arcpy mxd = arcpy.mapping.MapDocument("CURRENT") df = arcpy.mapping.ListDataFrames( ...
- leetcode-hard-array-149. Max Points on a Line -NO
mycode 不会.... 参考 因为每次遍历一个点,也就是i的时候,都是新建的一个lines,所以也就是考虑了k相同b不同的情况 最后gcd函数就求最大公约数,来解决斜率精度的问题 class S ...
- Going Deeper with Convolutions阅读摘要
论文链接:Going deeper with convolutions 代码下载: Abstract We propose a deep convolutional neural network ...
- LC 781. Rabbits in Forest
In a forest, each rabbit has some color. Some subset of rabbits (possibly all of them) tell you how ...
- Oracle 中的进制转换
Oracle 中的进制转换 */--> Oracle 中的进制转换 Table of Contents 1. 进制名 2. 10进制与16进制互相转换 2.1. 10进制转换为16进制 2.2. ...
- 使用LuceneUtil工具类,完成CURD操作
package loaderman.curd; import java.util.ArrayList; import java.util.List; import loaderman.entity.A ...
- java基础内存基础详解
堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存放对 ...
- Mac运行React Native安卓项目报错解决
传送门参考: 下面的这个链接很详细了,一步一步就好.... https://github.com/NARUTOyuyang/React-Native 然而在运行react-native run-and ...
- 2019Java常见面试上
一.开场白简单的介绍一下自己的工作经历与职责,在校或者工作中主要的工作内容,主要负责的内容:(你的信息一清二白的写在简历上,能答出来的最好写在上面,模棱两可不是很清楚的最好不要写,否则会被问的很尴尬) ...
- Python处理字符串和列表元组的小技巧
变量值互换 a = 1 b = 100 # 变量值互换 a, b = b, a print('a:', a) print('b:', b) 输出结果: a: 100 b: 1 多个变量赋值 a, b, ...