vue数据请求fetch改axios(统一的http请求工具)
原版fetch(以分页查询的请求接口为例)
fetch("http://localhost:8086/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize + "&username=" + this.username)
.then(res => res.json()).then(res => {
console.log(res)
this.tableData = res.data
this.total = res.total
})
1、安装axios
D:\study\test2\vue>npm i axios -S
安装的路径一定要正确
2、创建一个utils包里写个request.js
做了三部分事情:新建,对请求头处理,对响应结果进行处理。
import axios from 'axios'
import router from "@/router";
const request = axios.create({
baseURL: 'http://localhost:8086',
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
if (user) {
config.headers['token'] = user.token; // 设置请求头
}
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
// 当权限验证不通过的时候给出提示
if (res.code === '401') {
// ElementUI.Message({
// message: res.msg,
// type: 'error'
// });
router.push("/login")
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
在mian.js里引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/globle.css'
import request from "./utils/request";
Vue.config.productionTip = false
Vue.use(ElementUI, { size: "mini" });
//引入
Vue.prototype.request=request
new Vue({
router,
render: h => h(App)
}).$mount('#app')
修改接口的请求方式:
load() {
request.get("http://localhost:8086/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize + "&username=" + this.username).then(res=>{
this.tableData=res.records
this.total=res.total
})
},
request拼接字符有点丑改造一下
load() {
request.get("http://localhost:8086/user/page",
{
params : {
pageNum: this.pageNum,
pageSize: this.pageSize,
username :this.username
}
}).then(res=>{
this.tableData=res.records
this.total=res.total
})
},