1.先在vue项目中下载axios
npm i axios -S
2.request.js用来请求数据,封装的代码如下:
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:9090', // 注意!! 这里是全局统一加上了 后端接口前缀 前缀,后端必须进行跨域配置!
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
axios.interceptors.request.use(
function (config) {
let res = config.data;
if (config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
}, function (error) {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
)
export default request
3.在main.js中导入封装的代码
import request from './utils/request'
Vue.prototype.$request = request
4.在vue组件中使用
<!-- import request from "@/utils/request"; -->
<!-- 引入对应的js文件 -->
save() {
this.request.post('/user', this.user).then(
res => {
this.load()
},
Error => {
console.log(Error)
}
)
this.dialogFormVisible = false
},