From b40e6cf1726ff7ae2e14c8f1fe9a1d37a3309434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=A5=A5=E6=96=AF?= <9068149@qq.com> Date: Fri, 19 Nov 2021 14:02:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96axios=E5=B0=81?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/api.js | 23 +++--- src/api/httpAjax.js | 20 ------ src/api/request.js | 165 +++++++++++++++++++++++++++++++++----------- 3 files changed, 135 insertions(+), 73 deletions(-) delete mode 100644 src/api/httpAjax.js diff --git a/src/api/api.js b/src/api/api.js index a2df19a..7aa9e60 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -1,14 +1,11 @@ -import httpAjax from './httpAjax.js' +/**请求路径 + * + */ +import { post } from '@/api/request' -class httpApi { - - //手机登录接口 - loginAdminTest = data => httpAjax({ - url: '/loginAdminTest', - data, - method: 'post' - }) - -} - -export default new httpApi() \ No newline at end of file +export default { + // 登录 + loginAdminTest: params => { + return post('/loginAdminTest', params) + } +} \ No newline at end of file diff --git a/src/api/httpAjax.js b/src/api/httpAjax.js deleted file mode 100644 index 6cfe039..0000000 --- a/src/api/httpAjax.js +++ /dev/null @@ -1,20 +0,0 @@ -import axios from "axios" -import Qs from "qs" -import { Message } from 'element-ui'; -// 请求封装 -export default function httpAjax (config) { - return new Promise((resolve, reject) => { - const method = config.method ? config.method.toLowerCase() : "get" - if(!config.data) config.data = {} - if(['delete', 'get', 'head', 'options'].some(item => item === method)) { - config.params = config.data - delete config.data - }else if (config.header === "form" && ['post', 'put', 'patch'].some(item => item === method)) config.data = Qs.stringify(config.data) - // 响应拦截 - axios(config).then(response => { - if(!response.data.success) return Message.success('测试环境'); - resolve(response.data) - }).catch( error => reject(error)) - }) -} - diff --git a/src/api/request.js b/src/api/request.js index 2464554..9ce73ad 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -1,41 +1,126 @@ -import axios from 'axios' -import Vue from 'vue' -let base = window.global_config.BASE_URL; +/** + * axios封装 + * 请求拦截、相应拦截、错误统一处理= + */ - -// 推广链接 -Vue.prototype.$baseURL ='https://wshop.starfirelink.com/' - -// 请求域名 -axios.defaults.baseURL = base - -axios.defaults.withCredentials=true - -// 请求拦截器 -/* axios.interceptors.request.use( - config => { - return config - }, - error => { - return error - } -) */ - -// 响应拦截器 -axios.interceptors.response.use( - response => { - const res = response.data - // 1002:非法令牌和令牌过期 5012:其他客户端登录 - if (res.code === 1002 || res.code === 9018 || res.code === 9996) { - // 清除全部数据 - /* localStorage.clear() */ - // 返回登录页面 - /* router.push({path: '/personalCourse'}) */ - } - return response - }, - error => { - /* Toast("操作失败，请重新操作") */ - return error - } -) + import { Toast } from 'vant'; + import axios from 'axios' + + let loadingInstance = null // 全局加载loadding + + const instance = axios.create({ //创建axios实例 + timeout: 10000, // 设置超时时间10s + baseURL: window.global_config.BASE_URL // 请求配置静态文件config/config.js dev模式下为 api 走代理模式 + }) + + + // 设置默认请求头 + instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; + + // 跨域允许携带cookie + instance.defaults.withCredentials = true + + // 请求拦截器 + instance.interceptors.request.use( + request => { + // 在发送请求前验证token 并添加token请求头 + // if (getToken()) request.headers['token'] = getToken() + loadingInstance = Toast.loading({ + message: '拼命加载中...', + forbidClick: true, + duration: 0, + overlay: true, + loadingType: 'spinner' + }); + + if (request.method === 'get') { // 添加时间戳参数，防止浏览器（IE）对get请求的缓存 + request.params = { + ...request.params, + t: new Date().getTime() + } + } + + return request + }, + error => { + return error + } + ) + + // 响应拦截 + instance.interceptors.response.use( + response => { + + if (loadingInstance) { + loadingInstance.clear() + } + + let code = response.data.code + let status = response.status + // 1002:非法令牌和令牌过期 5012:其他客户端登录 6005 登录过期 + if (code === 1002 || code === 5012 || code == 6005) { + // 清除本地所有数据 + // localStorage.clear() + } + + // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 + if (status === 200) { // 请求成功 + return Promise.resolve(response.data) + } else { // 错误的请求 抛出错误 + return Promise.reject(response) + } + }, + + error => { + + if (loadingInstance) { + loadingInstance.clear() + } + if (error.response) { + // 根据请求失败的http状态码去给用户相应的提示 + + return Promise.reject(error) + } else { + console.error(`请求错误${error}`) + return Promise.reject(new Error('请求超时, 请刷新重试')) + } + + } + + ) + + + /** + * get方法，对应get请求 + * @param {String} url [请求的url地址] + * @param {Object} params [请求时携带的参数] + */ + export function get(url, params) { + return new Promise((resolve, reject) => { + instance.get(url, { + params: params + }).then(res => { + resolve(res.data); + }).catch(err => { + reject(err.data) + }) + }) + } + + /** + * post方法，对应post请求 + * @param {String} url [请求的url地址] + * @param {Object} params [请求时携带的参数] + */ + export function post(url, params) { + return new Promise((resolve, reject) => { + instance.post(url, params) + .then(res => { + resolve(res.data); + }) + .catch(err => { + reject(err.data) + }) + }); + } + \ No newline at end of file