axios封装学习

首先是看这篇博客：

https://juejin.cn/post/6876993324159500301

然后根据axios官网：

import axios from 'axios'; import { Toast } from 'vant'
// 统一请求路径前缀 let base = '/api';
// `headers` 是即将被发送的自定义请求头 // headers: {'X-Requested-With': 'XMLHttpRequest'}, // axios.defaults.headers.common[''] = ''
// 接口环境地址 let API_ROOT = process.env.API_ROOT
// 超时设定 axios.defaults.timeout = 15000; // 跨域访问携带cookie axios.defaults.withCredentials = true
axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, err => { // 对请求错误做些什么 Toast('请求超时'); return Promise.resolve(err); });
// http response 拦截器 // 对响应数据做点什么 axios.interceptors.response.use(response => { const data = response.data; // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case 210: Toast(data.message); break; // 错误 case 500: Toast("联系管理员"); break; default: return data; } return data; }, (err) => { // 返回状态码不为200时候的错误处理 Toast('连接错误，请重试'); return Promise.resolve(err); });
// 移除拦截器 // const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); // axios.interceptors.request.eject(myInterceptor);
// get 请求 export const getRequest = (url, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); };
// post请求 export const postRequest = (url, params) => { let accessToken = getStore("accessToken"); return axios({ method: 'post', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); };
export const putRequest = (url, params) => { // let accessToken = getStore("accessToken"); return axios({ method: 'put', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); };
export const deleteRequest = (url, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'delete', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); };
/** * 无需token验证的请求避免旧token过期导致请求失败 * @param{*}url * @param{*}params */ export const getRequestWithNoToken = (url, params) => { return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params }); }; import axios from 'axios'; import { Toast } from 'vant'
// 统一请求路径前缀 let base = '/api';
// `headers` 是即将被发送的自定义请求头 // headers: {'X-Requested-With': 'XMLHttpRequest'}, // axios.defaults.headers.common[''] = ''
// 接口环境地址 let API_ROOT = process.env.API_ROOT
// 超时设定 axios.defaults.timeout = 15000; // 跨域访问携带cookie axios.defaults.withCredentials = true
axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, err => { // 对请求错误做些什么 Toast('请求超时'); return Promise.resolve(err); });
// http response 拦截器 // 对响应数据做点什么 axios.interceptors.response.use(response => { const data = response.data; // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case 210: Toast(data.message); break; // 错误 case 500: Toast("联系管理员"); break; default: return data; } return data; }, (err) => { // 返回状态码不为200时候的错误处理 Toast('连接错误，请重试'); return Promise.resolve(err); });
// 移除拦截器 // const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); // axios.interceptors.request.eject(myInterceptor);
// get 请求 export const getRequest = (url, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); };
// post请求 export const postRequest = (url, params) => { let accessToken = getStore("accessToken"); return axios({ method: 'post', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); };
export const putRequest = (url, params) => { // let accessToken = getStore("accessToken"); return axios({ method: 'put', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); };
export const deleteRequest = (url, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'delete', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); };
/** * 无需token验证的请求避免旧token过期导致请求失败 * @param{*}url * @param{*}params */ export const getRequestWithNoToken = (url, params) => { return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params }); };

axios封装学习

相关

标签