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;

2. 具体路由文件

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
  })
}

3. 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)
        }
      })
    };