首先npm一下axios和qs
npm install axios --save
npm install qs --save
目录配置 (个人习惯, 可以酌情修改)
src/common // 存放公共类
src/config/index.js // 存放公共配置文件
src/api // 分文件夹存放API接口
首先是axios.js核心文件
src/common/http/axios.js
import axios from 'axios'
import Qs from 'qs'
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) => {
let data = config.method === 'get' ? config.params : Qs.stringify(JSON.parse(config.data))
// 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
然后是axios应用文件
src/common/http/api-request.js
import HttpRequest from './axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const axios = new HttpRequest(baseUrl)
/**
* http post请求
* @param url请求的url地址
* @param params 基于post请求参数,格式必须是json,例如{id: '1111'}
* @param config 其他配置,一般是用于配置其他属性
*/
export function post (url, data, config) {
let options = {url: url, data: data, method: 'post'}
let opt = config ? Object.assign(config, options) : options
return axios.request(opt)
}
/**
* http get请求
* @param url请求的url地址
* @param params 基于get请求参数,格式必须是json,例如{id: '1111'}
* @param config 其他配置,一般是用于配置其他属性
*/
export function get (url, params, config) {
let options = {url: url, method: 'get', params: params}
let opt = Object.assign(options, config)
return axios.request(opt)
}
export default {
axios,
post: post,
get: get
}
接着配置公共参数
src/config/index.js
export default {
/**
* @description 接口地址
*/
apiUrl: 'http://127.0.0.1:8080',
/**
* @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: '/api/',
pro: '/api/'
},
}
新建API文件, 这里后期可以根据业务来存放不同的API
src/api/test/testAPI.js
import http from '@/common/http/api-request.js'
import config from '@/config'
export default {
testAPI: function (param) {
return http.post(config.apiUrl + '/service/getServiceInfo', param)
}
}
页面应用
src/pages/demo/index.vue
<template>
<div>
TEST
</div>
</template>
<script>
import testAPI from '@/api/test/testAPI.js'
export default {
components: {},
data () {
return {
}
},
created () {},
mounted () {
this.test()
},
methods: {
test: function () {
testAPI.testAPI({}).then(function (response) {
console.log(response)
})
}
}
}
</script>
<style scoped>
</style>
以上.
评论
暂无评论