关键词
借助config
文件夹下 index.js
文件中的 proxyTable
属性
proxyTable: {
'/apis': {
// 测试环境
target: 'http://www.xxx.cn/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},
接口请求
fetch
fetch("/apis/test/xxx.php",{ // 这里用/apis替代了接口域名
method:"post", // 请求方式
headers:{
"Content-type":"application/json",
token:"xxx" // token
},
body:JSON.stringify({username:"xxx",password:"xxx"}) // 请求值
})
.then(result => {
// console.log(result)
return result.json() // JSON解析
})
.then(data => {
console.log(data) // 得到返回的data数据
})
axios
this.$axios.post("/apis/test/xxx.php",{username:"xxx",password:"xxx"})
.then(data => {
console.log(data)
})
axios
添加token
axios.defaults.headers.common['token'] = "xxx"
axios.defaults.headers.post["Content-type"] = "application/json"
或
import axios from 'axios'
import qs from 'qs'
import store from 'store'
// 设置请求超时时间
const http = axios.create({
timeout: 20000
})
// POST请求前将数据转化成FormData对象
http.interceptors.request.use(config => {
config.data = qs.stringify(config.data)
// 判断是否存在token,如果存在的话,则每个http header都加上token
if (store.get('token')) {
config.headers['api-token'] = `${store.get('token')}`
}
return config
})
// 边缘处理
http.interceptors.response.use((res) => {
if (res.data.code === 1) {
return Promise.resolve(res)
} else if (res.data.code === 10001 || res.data.code === 11506) {
window.location = '/'
} else {
return Promise.resolve(res)
}
}, (error) => {
return Promise.reject(error)
})
// 请求类
class API {
// GET请求
get (controller, data = {}, config = {}) {
let params = { params: data }
const url = this.buildUrl(controller)
return http.get(url, params, config)
}
// POST 请求
post (action, data = {}, config = {}) {
const url = this.buildUrl(action)
return http.post(url, data, config)
}
// 构建请求url
buildUrl (action) {
···
let url = `/apis/${action}`
return url
}
}
const api = new API()
export default api