封装axios,自定义header,请求拦截器
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
点击这里前往axios官网,了解安装详情
1、封装axiso
新建js文件并将一下文件复制。
import axios from 'axios'
import Vue from 'vue'
import url from '@/assets/js/url' //你的url文件
import qs from 'qs'//格式化字符串工具
axios.interceptors.request.use( // 正文开始
(config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 区分生产模式和开发模式
function setHost() {
return 'http://' + ''
}
let location = process.env.VUE_APP_LOACTION || setHost()
// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
axios.defaults.baseURL = location // 默认地址
axios.defaults.headers['Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8'
let v = new Vue()
/**
*
* 接收一个对象
* method 请求类型
* url 请求链接
* data 请求数据
* then 回调方法
*/
let axiosHttp = (obj) => {
let loading = v.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)',
})
let oData = obj.method == 'GET' ? obj.data : {}
let params = obj.params || oData
axios({
method: obj.method || 'POST',
url: obj.url || '',
data: obj.data || '',
params,
})
.then(function(res) {
loading.close()
let data = res.data
if (data.code != 0) {
v.$message({
type: 'error',
message: data.message,
})
return
} else if (data.code == 1) {
v.$alert(data.message, '系统提示')
obj.catch && typeof obj.catch == 'function' && obj.catch(res)
} else if (data.code == 999) {
// 999重新登陆
process.env.NODE_ENV == 'production' &&
v.$alert(data.message, '系统提示', {
callback: () => (window.location.href = '/adminLogin'),
})
} else if (data.code == 444) {
// 444是404页面
// v.$router.push({name:'error'});
} else {
obj.then && typeof obj.then == 'function' && obj.then(res)
}
})
.catch(function(error) {
loading.close()
console.log(error.response)
if (error.response) {
console.log(error.response.status)
if (error.response.status != 200) {
v.$message({
type: 'error',
message: error.response.statusText,
})
}
}
})
} //正文结束
export { axiosHttp}
2、完成步骤一后
你可以按照一下发起一个ajax请求:
index(self, name) {
let config = {
category_name: self[name].category_name,
sort: self[name].sort,
icon: self['url'],
describe: self[name].describe,
}
console.log(config)
axiosHttp({
url: url.insertCategory,
data: config,
then(res) {
console.log(res.data.data)
if (res.data.code == 0) {
self.$message({
type: 'success',
message: res.data.message,
})
self.dialogVisible = false
self.$api.getCategoryList(self, 'schoolData')
}
},
})
},