app分享：注册下载h5 页面总结

最新推荐文章于 2024-09-18 10:45:14 发布

一个前端女子

最新推荐文章于 2024-09-18 10:45:14 发布

阅读量556

点赞数

分类专栏： JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44173499/article/details/127409036

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用postcss-px-to-viewport适配h5页面，通过window.navigator.userAgent识别设备和浏览器，以及cross-env处理跨域问题。重点讲解了axios中的Content-Type自定义和对象参数编码技巧，以及在axios实例中统一处理参数的方法。

摘要由CSDN通过智能技术生成

1.h5 页面适配插件：postcss-px-to-viewport；

2.区分设备和浏览器：window.navigator.userAgent

3. 跨域插件： cross-env

4.Content-Type的改变：使用axios时候改变无效，小程序有用

4.使用axios请求接口会根据传递参数的形式如果是对象就会把Content-Type的值变成json,如果传递的是字符串Content-Type的值变成x-www-form-urlencoded；在创建axios实例改变Content-Type是没有作用的。

如果参数是一个对象并且需要拼接在请求地址的后边，可以做统一处理把对象变换成字符以key=value形式，具体方法：

* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

本地创建的axios实力文件中处理：

import axios from 'axios'
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi'
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
   }
 return config
}, error => {
    console.log(error)
    Promise.reject(error)
})