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. Linux设备驱动程序 之 异步通知

    尽管大多数时候阻塞型和非阻塞型操作的组合以及select方法可以有效的查询设备,但是某些时候用这种技术处理就效率不搞了: 例如:一个进程在低优先级执行长的循环计算,但又需要尽可能快的处理输入数据,如果 ...

  2. Nginx数据结构之散列表

    1. 散列表(即哈希表概念) 散列表是根据元素的关键码值而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录, 以加快查找速度.这个映射函数 f 叫做散列方法,存放记录的数 ...

  3. LeetCode 132. 分割回文串 II(Palindrome Partitioning II)

    题目描述 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回符合要求的最少分割次数. 示例: 输入: "aab" 输出: 1 解释: 进行一次分割就可将 s ...

  4. Flutter移动电商实战 --(7)dio基础_POST请求的使用

    这节学习一下POST请求的使用,其实POST和Get请求都是在工作中最重要的两种请求.比如我们要传递一组表单数据过去,这时候用Get请求就是不太合适的,使用POST比较好. SingleChildSc ...

  5. Undo Segment/Undo Retention

    undo_retention简单定义,就是最多数据的最少保留时间.AUM模式下,undo_retention参数用于事务commit后undo数据保留的时间.单位为秒.这是个no guarantee的 ...

  6. 微信小程序跳转问题:wx.redirectTo、wx.navigateTo、wx.reLaunch、wx.switchTap、wx.navigateBack区别

    wx.redirectTo:关闭当前页,跳转到指定页: wx.navigateTo:保留当前页,跳转到指定页: wx.reLaunch:关闭所有页面,打开到应用内的某个页面. wx.switchTap ...

  7. R语言常用包简介

  8. mysql安装报vcruntime140.dll缺失

    mysql安装报:vcruntime140.dll缺失 安装:Visual C++ Redistributable for Visual Studio 2015 可以解决此问题

  9. Java泛型(2):泛型接口

    泛型不仅可以在类上实现,也可以在接口上实现.JDK中[Iterable<T> <-- Collection<E> <-- List<E>/Queue&l ...

  10. androidstudio的安装与抓log

    公司新开发的软件是基于unity的,我们被告知unity是不允许charles抓包的,故此只能只用 Android   studio 一. Android    studio的安装与配置 在此我就不赘 ...