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. MySQL所谓的脏页和“抖”一下是什么联系?

    在我们平时经常用到的sql更新语句,之前是认为只要sql执行,当前sql的操作会立马执行到服务器磁盘上并返回,但是后来我才知道,事实并非如此,在了解事实之前,首先可能需要先了解什么是redo log, ...

  2. JS基础_数组的遍历

    遍历:将数组中所有的元素都取出来 1.for循环 var arr = ["1","2","3"]; for(let i=0;i<arr ...

  3. SpringMVC支持跨域请求

    一.如果项目中使用的SpringMVC4.3.9以下,就需要对该请求配置Filter,设置请求头可支持跨域.使用方法: --spring cloud zuul支持跨域---:https://blog. ...

  4. 继承关系下的this关键字

    继承关系下的this关键字 在继承关系下,父类中的this关键字并不总是表示父类中的变量和方法.this关键字的四种用法如前文所述,列举如下. 1) this(paras…); 访问其他的构造方法 2 ...

  5. nginx 部署前端项目(vue)

    前提:安装好nginx 打开nginx目录,一般是(/usr/local/nginx) npm run build 打好vue包 一般放到(/usr/local/nginx/html/)目录下 配置: ...

  6. HearthBuddy BotManager

    MainWindow private void button_0_Click(object sender, RoutedEventArgs e) { Configuration.Instance.Sa ...

  7. PyTorch中使用深度学习(CNN和LSTM)的自动图像标题

    介绍 深度学习现在是一个非常猖獗的领域 - 有如此多的应用程序日复一日地出现.深入了解深度学习的最佳方法是亲自动手.尽可能多地参与项目,并尝试自己完成.这将帮助您更深入地掌握主题,并帮助您成为更好的深 ...

  8. 1.2 Go语言基础之变量和常量

    变量和常量是编程中必不可少的部分,也是很好理解的一部分. 一.标识符与关键字 1.1 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变量名.常量名.函数名等等. Go语言中标识符由字 ...

  9. wait_timeout 和 interactive_timeout

    wait_timeout 和 interactive_timeout Table of Contents 1. 参数说明 2. 原代码 3. interactive_timeout覆盖wait_tim ...

  10. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...