简单的接口封装方便查阅,以下是自己记录:
1.接口的配置端
/ 配置文件 /
_const httpURL = {
// 开发环境接口地址
_baseUrl: ‘https://new-zyb.schoolpi.net‘,
}
export default {
_//开发环境
_requestURL: httpURL.baseUrl,
}
2.封装axios部分,在这里使用了class类做封装
import axios from ‘axios’;
import baseUrl from ‘../http/baseUrl’
export class NewAxios {
constructor() {
this.baseURL = baseUrl.requestURL;
this.timeout = 10000;
this.withCredentials = true;
}
setInterceptors = (instance) => {
instance.interceptors.request.use(
(config)=>{
let token = window.sessionStorage.getItem(‘token’)
if (token) {
config.headers.Authorization= token;// 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},error => {
// console.log(error)
});
instance.interceptors.response.use(<br /> (response)=>{<br /> _// console.log(response)<br /> _return response;
},<br /> (error) => {<br /> let errMsg = '';<br /> if (error && error.response.status) {<br /> switch (error.response.status) {<br /> case 401:<br /> errMsg = '登录状态失效,请重新登录';<br /> break;<br /> case 403:<br /> errMsg = '拒绝访问';<br /> break;<br /> case 408:<br /> errMsg = '请求超时';<br /> break;<br /> case 500:<br /> errMsg = '服务器内部错误';<br /> break;<br /> case 501:<br /> errMsg = '服务未实现';<br /> break;<br /> case 502:<br /> errMsg = '网关错误';<br /> break;<br /> case 503:<br /> errMsg = '服务不可用';<br /> break;<br /> case 504:<br /> errMsg = '网关超时';<br /> break;<br /> case 505:<br /> errMsg = 'HTTP版本不受支持';<br /> break;<br /> default:<br /> break;<br /> }<br /> } else {<br /> errMsg = error;<br /> }<br /> return Promise.reject(errMsg);<br /> }<br /> )<br /> }
request() {
// 创建axios实例
_axios.defaults.headers[‘Content-Type’] =’application/x-www-form-urlencoded’;
//实例化
_const instance = axios.create({
baseURL:this.baseURL,
timeout:this.timeout,
});
_// // 配置拦截器,支持根据不同url配置不同的拦截器。<br /> _this._setInterceptors_(instance);
return instance;
}
}
3.单独页面调用axios封装
import {NewAxios} from ‘../until/request/request’
import {baseApi} from ‘./baseApi’
export class loginView extends NewAxios{
//构造函数
_constructor(props) {
super(props);
this.until = this.request()
}
//登录
loginData(params){
return this.until({
url:baseApi.login,
method:’POST’,
data:params
// params:params
_})
}
}
4.在使用页面调用封装接口
import {loginView} from “../../config/loginView”;
const {data:res} = await (new loginView().loginData(formdata))