axios封裝學習
阿新 • • 發佈：2022-04-02
首先是看這篇部落格：
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
// 超時設定 axios.defaults.timeout = 15000; // 跨域訪問攜帶cookie axios.defaults.withCredentials = true
axios.interceptors.request.use(config => { // 在傳送請求之前做些什麼 return config; }, err => { // 對請求錯誤做些什麼 Toast('請求超時'); return Promise.resolve(err); });
// http response 攔截器 // 對響應資料做點什麼
// 移除攔截器 // 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 }); };