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