在大型项目中 http请求会有很多 而且我们需要区分 所以我们可以把数据请求拆分出来 单独管理这样一来 就可以增强项目的可维护性与可扩展性
-
api 请求集中式管理
-
实现请求拦截
-
实现响应拦截
-
常见错误信息处理
-
请求头设置
api请求集中管理
1.初始化axios实例 编写util文件夹 在编写index.js来容纳封装内容
import axios from "axios"
// 创建 axios 请求实例
const serviceAxios = axios.create({
baseURL: "", // 基础请求地址
timeout: 10000, // 请求超时设置
});
export default serviceAxios
2.新建api文件夹 并且编写js文件用来容纳 api请求集中管理
import request from "../util/index.js"
export let funget=()=>{
return request({
url:"/api/userlist/get",
method:"GET",
params:{
name:"xixi"
}
})
}
3.在组件中进行使用我们封装的 api请求集中管理
// 引用
import {funget} from "../api/index.js"
// 使用
funget().then((ok)=>{
console.log(ok)
})
}
axios拦截器
请求拦截
有的时候我们在发送请求的时候后端需要每次我们携带一些数据(比如token)但是添加在每个请求非常麻烦 所以我们可以添加在请求头中 那么这个配置我们可以在拦截器中进行设置
响应拦截
响应拦截器的作用是在接收到响应后进行一些操作
响应拦截器也是一样如此,就是在请求结果返回后,先不直接显示错误,而是先对响应码等等进行处理,处理好后再导出给页面一个错误提醒
添加请求 响应拦截
import axios from "axios"
// 创建 axios 请求实例
const serviceAxios = axios.create({
baseURL: "", // 基础请求地址
timeout: 10000, // 请求超时设置
});
// 添加请求拦截器
serviceAxios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
serviceAxios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
响应拦截设置HTTP状态码
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
console.log("error", error.response.status)
switch (error.response.status) {
case 302: alert('接口重定向了!'); break;
case 400: alert('参数不正确!'); break;
case 401: alert('您未登录,或者登录已经超时,请先登录!'); break;
case 403: alert('您没有权限操作!'); break;
case 404: alert('请求地址出错'); break; // 在正确域名下
case 408: alert('请求超时!'); break;
case 409: alert('系统已存在相同数据!'); break;
case 500: alert('服务器内部错误!'); break;
case 501: alert('服务未实现!'); break;
case 502: alert('网关错误!'); break;
case 503: alert('服务不可用!'); break;
case 504: alert('服务暂时无法访问,请稍后再试!'); break;
case 505: alert('HTTP版本不受支持!'); break;
default: alert('异常问题,请联系管理员!'); break
}
// 对响应错误做点什么
return Promise.reject(error);
});
设置请求拦截请求头信息
你把用户的token以请求头的方式给后台
地址:/userlist/routertoken
方式 get
参数: 头信息是usertoken
返回值??