
axios.js
import axios from 'axios'
import Qs from 'qs'
// 时间戳
// const NewTimeStamp = new Date().getTime()
// 定义请求类
class HttpRequest {
constructor (baseUrl = baseURL) {
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig () {
const config = {
baseURL: this.baseUrl,
headers: {}
}
return config
}
// 小程序自定义处理请求
adapter (instance) {
instance.defaults.timeout = 30000
instance.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
// console.log(config,'adapter')
let data = config.method === 'get' ? config.params : Qs.stringify(JSON.parse(config.data))
// wx小程序 发起请求相应 log 就可以看到熟悉的返回啦
// console.log(typeof config.data, config, data)
wx.request({
url: config.url,
method: config.method,
data: data,
header: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' // 默认值
},
success: (res) => { return resolve(res) },
fail: (err) => { return reject(err) }
})
})
}
}
distroy (url) {
delete this.queue[url]
if (!Object.keys(this.queue).length) {
// Spin.hide()
}
}
// 拦截器
interceptors (instance, url) {
// 请求拦截
instance.interceptors.request.use(config => {
// 添加全局的loading...
if (!Object.keys(this.queue).length) {
// Spin.show() // 不建议开启,因为界面不友好
}
this.queue[url] = true
// 统一拦截添加token
config.params = {}
// config.params.token = getToken()
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use(res => {
this.distroy(url)
const { data, status } = res
// 接口token过期处理
// if (res.data.Code === -202) {
// router.push({ name: 'login', params: { failure: true } })
// // return Promise.reject(new Error(res.data.Message).message)
// }
return { data, status }
}, error => {
this.distroy(url)
return Promise.reject(error)
})
}
// 请求开始
request (options) {
const instance = axios.create()
this.adapter(instance)
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
api.request.js
import HttpRequest from '@/utils/axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const axios = new HttpRequest(baseUrl)
export default axios
config->index.js
export default {
/**
* @description token在Cookie中存储的天数,默认1天
*/
cookieExpires: 1,
/**
* @description 是否使用国际化,默认为false
* 如果不使用,则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
* 用来在菜单中显示文字
*/
useI18n: false,
/**
* @description api请求基础路径
*/
ajaxHeader: {'Content-Type': 'application/x-www-form-urlencoded'},
baseUrl: {
dev: 'https://www.easy-mock.com/mock/5ca562c77d30ce373280859f/example',
// dev: 'http://192.168.1.168:8080/hzx-erp-service-8088',
// dev: 'http://192.168.1.151:9088/hzx-erp-service-8088',
pro: 'http://192.168.1.151:9088/hzx-erp-service-8088'
}
}
index.vue 调用
<template>
<div class="followRecords">
<i-button @click="handleClick">默认按钮</i-button>
<i-button @click="handleClick" type="error" long="true">联通两边按钮</i-button>
<i-button @click="handleClick" type="primary">Primary</i-button>
<i-button @click="handleClick" type="ghost">Ghost</i-button>
<i-button @click="handleClick" type="info">Info</i-button>
<i-button @click="handleClick" type="success">Success</i-button>
<i-button @click="handleClick" type="warning">Warning</i-button>
<i-button @click="handleClick" type="error">Error</i-button>
</div>
</template>
<script>
// import axios from '../../utils/axios'
// import Qs from 'qs'
import axios from '@/utils/api.request'
export default {
name: 'followRecords',
data () {
return {
}
},
mounted () {
let cc = {
name: '88888Fred',
lastName: 'Flintstone'
}
axios.request({
url: '/test',
method: 'post',
// headers: config.ajaxHeader,
data: cc
}).then(response => {
console.log(response)
})
// axios.post('https://www.easy-mock.com/mock/5ca562c77d30ce373280859f/example/test', Qs.stringify(cc)).then(function (response) {
// console.log(999, response)
// }).catch(error => {
// console.log(888, error)
// })
},
methods: {
handleClick (e) {
console.log(e)
}
}
}
</script>
<style>
</style>