post、get、delete、put请求

一、配置axios拦截器

// src/utils/request.js
import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com', // 你的 API 基础 URL//timeout: 10000, // 请求超时时间
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在发送请求之前做些什么// 例如，添加 token 到请求头const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 有token就更新token，没有就不干嘛return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 对响应数据做些什么if(response.data.code === 0){return response.data;}alert(response.data.message ? response.data.message : "操作失败")return response.data;},(error) => {// 对响应错误做些什么if (error.response) {switch (error.response.status) {case 401:// 处理未授权的情况break;case 404:// 处理未找到资源的情况break;// 其他状态码处理default:break;}}return Promise.reject(error);}
);export default instance;

为什么是返回result.data而不是result？

在Axios中，result对象包含了整个响应，包括data、status、statusText、headers和config。在拦截器中返回result.data，是因为后端服务通常会将数据放在响应对象的 data 字段中。

二、封装请求API

import request from '@/utils/request.js'// 封装 GET 请求
export const getData = (params) => {return request.get('/endpoint', { params });
};// 封装 POST 请求
export const postData = (data) => {return request.post('/endpoint', data);
};// 封装 PUT 请求
export const updateData = (id, data) => {return request.put(`/endpoint/${id}`, data);
};// 封装 DELETE 请求
export const deleteData = (id) => {return request.delete(`/endpoint/${id}`);
};

使用api方法时，要导入方法 

import { userRegisterService, userLoginService } from '@/api/user.js';

三、axios发送请求时两种携带参数的方式

须知：post、put可以携带请求体，而delete和get不携带请求体，这四种请求都可以携带url参数

1、参数携带到请求体里

axios.post('/api/resource', {key: 'value',anotherKey: 'anotherValue'
})// 或者传递对象参数
const registerData = {username: '123',password: '1234',repassword: '1234'
}axios.post('/api/reg', registerData);

2、参数携带到URL里

axios.get('/api/resource', {params: {key1: 'value1',key2: 'value2'}
})

或者 

const data = {key1: 'value1',key2: 'value2'
}axios.post('/api/resource', {params: data
})