uview http 封装请求 有没有适合零基础学习的文章，如何解决？

Question

uview http 封装请求 有没有适合零基础学习的文章，如何解决？

Answer 1

基于uview封装http请求_提筆写悲傷的博客-CSDN博客_uview封装请求 1.在项目下新建config文件夹2.request.js文件内容// 此vm参数为页面的实例，可以通过它引用vuex中的变量module.exports = (vm) => { // 初始化请求配置 uni.$u.http.setConfig((config) => { /* config 为默认全局配置*/ config.baseURL = ''; /* 根域名 */ config.timeout = 80000;... https://blog.csdn.net/weixin_45256751/article/details/122375008

import axios from "axios";
import qs from "qs";
import { Toast } from "vant";
// 引入element 按需引消息提示
// import { Message } from 'element-ui'

const service = axios.create({
  baseURL: "",
  timeout: 30000,
  withCredentials: true
});
// 请求拦截器
let requestNum = 0;
service.interceptors.request.use(
  config => {
    // 增添token
    // 每次请求时requestNum++
    requestNum++;
    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
    Toast.loading({
      message: "加载中...",
      forbidClick: true
    });
    // config.headers.Authorization = localStorage.getItem('logintoken') || ''
    return config;
  },
  err => {
    requestNum = 0;
    Toast.clear();
    Promise.reject(err);
  }
);
// 响应拦截器
service.interceptors.response.use(
  response => {
    // else if (response.data.code !== 200) {
    //   Message.error(response.data.msg || '接口请求错误', 2000)
    // }
    // 以服务的方式调用的 Loading 需要异步关闭
    // 每次请求时-- 主要时用于判断当前共请求了多少次，如果返还的次数不等于请求的次数的话就不会进入这个条件
    // 只有当所有数据全返还时，才会关闭loading效果
    requestNum--;
    if (requestNum <= 0) {
      Toast.clear();
      requestNum = 0;
    }
    // 如果正常直接返回对应data请求数据
    return response.data;
  },
  err => {
    // 如果请求一旦出现问题 requestNum = 0 loadingInstance.close();
    Message({
      message: "服务器错误，请及时联系管理员！",
      type: "error"
    });
    // 如果请求一旦出现问题 requestNum = 0 loadingInstance.close();
    requestNum = 0;
    Toast.clear();
    return Promise.reject(err);
  }
);

// 封装get请求
const get = (url, params) => {
  return service({
    url: url,
    method: "get",
    params: params
  });
};
// 封装post请求
const post = (url, data) => {
  return service({
    url: url,
    method: "post",
    headers: { "Content-type": "application/json" },
    data: JSON.stringify(data)
  });
};
// 封装登录请求
const login = (url, data) => {
  return service({
    url: url,
    method: "post",
    headers: { "Content-type": "application/x-www-form-urlencoded" },
    data: qs.stringify(data)
  });
};

const upload = (url, data) => {
  service({
    method: "post",
    url: url,
    headers: {
      "Content-type": "application/x-www-form-urlencoded"
    },
    data: data
  });
};
export default {
  get,
  post,
  login,
  upload
  // baseURL,
  // upImgURL,
  // imgURL
};

你参考一下这个 这个是我当时封装的axios 就 uview的话也是类似的逻辑 主要的就是你的请求响应拦截 400 500等状态码统一处理
token判断等等