axios请求封装,新增put和delete请求

import axios from "axios";
import { useUserStore } from "@/store/user.js";
//创建一个新的请求实例instance,instance.的用法和axios.的用法一致,可以使用instance({})、instance.get()、instance.post()
const instance = axios.create({
  baseURL: import.meta.env.VITE_API_URL, //默认配置(这里不要用process.env,个人百度这个在vite中被废弃掉了,属性名必须以VITE_API_开头,否则 import.meta.env检测不到)
  timeout: 5000, //超时时间
});

//配置请求拦截器,在请求之前的数据处理,比如在请求头添加token,所有的请求都会经过拦截器
instance.interceptors.request.use(
  //config:该参数表示当前请求的配置对象
  (config) => {
    //例如:
    //在请求头统一添加token
    //或者请求之前显示lodding图标(这里只演示这个)
    const store = useUserStore();
    if (store.userinfo.token != "") {
      config.headers.Authorization = store.userinfo.token;
    }
    return config;
  },
  (err) => {
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  }
);

//配置响应拦截器
// 响应拦截器:在请求响应之后对数据处理,比如:登录失败、请求数据失败的处理
// instance.interceptors.response.use(response=>{l}, err=>{});
// 响应成功:执行回调函数1;响应失败,执行回调函数2
instance.interceptors.response.use(
  (response) => {
    return response; //这里的response就是请求成功后的res , response.data即是请求成功后回调函数内的参数res.data
  },
  (err) => {
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  }
);

//封装请求的api
const callapi = (method = "GET", url, data = {}) => {
  const params = method === "GET" ? data : {};
  const body = ["POST", "PUT"].includes(method) ? data : {};
  const options = { method, url, params, data: body };

  return instance(options);
};

//封装GET请求函数
export const getapi = (url, data) => callapi("GET", url, data);
export const postapi = (url, data) => callapi("POST", url, data);
export const putapi = (url, data) => callapi("PUT", url, data);
export const deleteapi = (url, data) => callapi("DELETE", url, data);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue通常使用Axios作为Http库来发送HTTP请求。下面是一个通用的Axios封装,可以用于发送get、put、post和delete请求。 首先,我们需要在项目中安装Axios依赖。可以使用npm或yarn命令来安装: ``` npm install axios ``` 或者 ``` yarn add axios ``` 然后,我们可以在项目中创建一个utils文件夹,并在其中创建一个http.js文件。在http.js文件中,我们可以编写通用的Axios封装代码: ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com' // 设置请求的默认基本URL }); // 请求拦截器,可以在请求发送之前做一些处理,比如添加请求头 instance.interceptors.request.use( config => { // 在请求发送之前添加一个Authorization请求头(如果需要) config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, error => { return Promise.reject(error); } ); // 响应拦截器,可以在请求返回之后做一些处理,比如处理错误信息 instance.interceptors.response.use( response => { // 在请求成功返回之后处理响应数据 return response; }, error => { // 在请求失败返回之后处理错误信息 return Promise.reject(error.response.data); } ); // 封装get请求 export const get = (url, params) => { return instance.get(url, { params }); }; // 封装put请求 export const put = (url, data) => { return instance.put(url, data); }; // 封装post请求 export const post = (url, data) => { return instance.post(url, data); }; // 封装delete请求 export const del = url => { return instance.delete(url); }; ``` 以上是一个简单的对Axios进行封装的例子。你可以根据自己的项目需求进行相应的修改和扩展。在组件中使用get、put、post和delete方法来发送不同类型的请求。示例代码如下: ```javascript import { get, put, post, del } from '@/utils/http'; // 使用get请求 get('/api/users').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用put请求 put('/api/user/1', { name: 'John', age: 30 }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用post请求 post('/api/user', { name: 'John', age: 30 }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用delete请求 del('/api/user/1').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 以上就是一个通用的Axios封装,可以用于发送get、put、post和delete请求。通过这种封装,可以简化和统一项目中的HTTP请求处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值