H5端汇总
文件下载 - 通过网络地址直接下载
直接通过浏览器地址打开可以直接下载。
如果需要改名可以js生成a标签，设置download属性为需要的文件名，但是如果文件域名不是当前本地域名就会涉及跨域，download属性不会生效了，结果方式如下
downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = 'blob';
x.onload=function(e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = fileName;
a.click()
}
x.send();
},
<a onclick="downloadFile('www.tupian.com', 'test.jpg')">
原文链接：https://blog.csdn.net/qq_41914451/article/details/104559527
ajax换成原生axios也可以
请求封装 - 清新版
// request.js
import axios from 'axios'
import { notification, message } from 'antd'
import history from 'umi/router';
const ipConfig = require('../apiConfig')
message.config({
top: 200,
duration: 3,
maxCount: 3,
})
/**
* 一、功能：
* 1. 统一拦截http错误请求码；
* 2. 统一拦截业务错误代码；
* 3. 统一设置请求前缀
* |-- 每个 http 加前缀 baseURL = /api，从配置文件中获取 apiPrefix
*
* 二、引包：
* |-- axios：http 请求工具库
* |-- notification：Antd组件 > 处理错误响应码提示信息
* |-- history：dva/router对象，用于路由跳转，错误响应码跳转相应页面
* |-- store：dva中对象，使用里面的 dispatch 对象，用于触发路由跳转
*/
// 设置全局参数，如响应超市时间，请求前缀等。
axios.defaults.timeout = 30000
if(process.env.NODE_ENV == 'development'){
// axios.defaults.baseURL = '/API'
axios.defaults.baseURL = ipConfig['dev']
}else{
axios.defaults.baseURL = ipConfig['build']
}
axios.defaults.withCredentials = true
// 状态码错误信息
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
}
// 添加一个请求拦截器，用于设置请求过渡状态
axios.interceptors.request.use((config) => {
const token = localStorage.user ? JSON.parse(localStorage.user).token : null
const visitToken = localStorage.visitToken
config.headers.token = token ? token : visitToken
return config
}, (error) => {
return Promise.reject(error)
})
// 添加一个返回拦截器
axios.interceptors.response.use((response) => {
return response
}, (error) => {
return Promise.reject(error)
})
export default function request (opt = {}) {
// if(!opt.data) opt.data = {} 更好的方式 - 默认参数 opt = {}
if(opt.method == 'GET') opt.params = opt.data
// 调用 axios api，统一拦截
return axios(opt)
.then((response) => {
// >>>>>>>>>>>>>> 请求成功 <<<<<<<<<<<<<<
// if(process.env.NODE_ENV == 'development'){
// if(!response.data.status){
// notification.error({
// message: `${opt.url}-${status}`,
// description: 'msg: '+response.data.msg,
// })
// }else{
// notification.success({
// message: `${opt.url}-${status}`,
// description: 'msg: '+response.data.msg+' data:'+JSON.stringify(response.data.data),
// })
// }
// }
if(!response.data.status && (response.data.code == '000009' || response.data.code == '700000')) {//登陆过期
window.g_app._store.dispatch({
type: 'global/common',
payload:{showLoginModal: true}
})
message.info(response.data.msg)
}
return response.data;
})
.catch((error) => {
// >>>>>>>>>>>>>> 请求失败 <<<<<<<<<<<<<<
// 请求配置发生的错误
if (!error.response) {
console.dir(error)
if(error.message.indexOf('timeout of')>-1) alert('请求超时！')
}
// 响应时状态码处理
const status = error.response.status;
const errortext = codeMessage[status] || error.response.statusText;
notification.error({
message: `请求错误- ${status}`,
description: errortext,
})
// if (status === 401) {
// history.push('/user/login')
// } else if (status === 403) {
// history.push('/exception/403')
// } else if (status <= 504 && status >= 500) {
// history.push('/exception/500')
// } else if (status >= 404 && status < 422) {
// history.push('/exception/404')
// }
// return { code: status, message: errortext }
})
}
参考资料：
\
