zoukankan      html  css  js  c++  java
  • vue 封装request.js

    vue - 封装request.js

    背景:个人在做一个业务项目练手,从0搭建vue,遇到的一点问题记录一下

    1. 封装request.js,用来请求
    import axios from 'axios';
    import qs from 'qs';
    
    const service = axios.create({
      timeout: 5000
    });
    
    service.interceptors.request.use(
      config => {
        // 设置请求头
        // config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
        config.transformRequest = [function (data) {
          // 在请求之前对data传参进行格式转换
          data = qs.stringify(data)
          return data
        }]
        return config;
      },
      error => {
      	console.log(error)
        return Promise.reject();
      }
    );
    
    service.interceptors.response.use(
      response => {
        if (response.status === 200) {
          return response.data;
        } else {
          Promise.reject();
        }
      },
      error => {
       	console.log(error)
        return Promise.reject();
      }
    );
    
    export default service;
    
    1. 具体路由文件
    import request from '../utils/request';
    const baseUrl = 'api'
    // 登录接口
    export function loginUrl(data) {
      return request({
        url: `${baseUrl}/login`,
        method: 'post',
        data: data
      })
    }
    // 获取用户信息接口
    export function getUserInfo(param) {
      return request({
        url: `${baseUrl}/user_info`,
        method: 'get',
    	params: param
      })
    }
    
    1. vue页面发起请求
    // vue3中proxy对象无法直接post传递给后端,需要传递target具体的值,toRaw(proxy对象)获取对象的值
        const submitForm = () => {
          loginUrl(toRaw(param)).then(res => {
            if (res && res.code === 0) {
              // 1、登录成功弹框
              ElMessage.success("登录成功")
              // 2、保存token
            } else {
              // 返回错误信息
              ElMessage.warning(res.msg)
            }
          })
        };
    

    本文来自博客园,作者:alisleepy,转载请注明原文链接:https://www.cnblogs.com/alisleepy/p/15731607.html

  • 相关阅读:
    k8s 组件介绍-kube-controller-manager
    k8s 组件介绍-API Server
    ELK+filebeat+redis 日志分析平台
    Logstash配置文件详情
    Logstash,Fluentd, Logtail对比伤害
    公司redis
    Linux之网络ping(unknown host)故障及yum no more mirrors to try
    Linux思维导图之计划任务
    Linux思维导图之进程管理
    Linux思维导图之网络管理
  • 原文地址:https://www.cnblogs.com/alisleepy/p/15731607.html
Copyright © 2011-2022 走看看