api封装,axios封装

本文介绍了如何在项目中进行axios的封装,通过在src/utils目录下创建request.js文件来实现。同时,展示了在登录功能中,如何在src/api/user.js中定义用户注册和登录的API接口,并在相关组件中导入使用这些接口。
摘要由CSDN通过智能技术生成

封装axios
src下新建一个utils文件夹
新建request.js

import axios from "axios"


//2. 创建axios实例
const request = axios.create({
	//请求的公共接口地址
	baseURL : "/api",
	//请求的超时时间
	timeout : 5000,
})

//3. 配置请求拦截和响应拦截
// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  })

//4. 导出axios实例
export default request

在需要调接口的组件里引入
import request from “…/utils/request,js”
登录时

submit(){

}

src下面新建api文件夹下新建user,js

import request from "../utils/request.js"

//注册接口
export function userReg(username,password,repassword){
	request({
		url : "/api/
axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js。它可以用于发送GET、POST、PUT、DELETE等请求,并且支持拦截器、取消请求、自动转换JSON数据等功能。 在使用axios发送请求时,需要先引入axios库,然后通过axios对象调用相应的方法,例如: ```javascript import axios from 'axios'; axios.get('/api/user') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 上面的代码中,我们使用axios发送了一个GET请求,请求的地址是`/api/user`。当请求成功时,会在控制台输出响应数据;当请求失败时,会在控制台输出错误信息。 为了方便使用,我们可以将axios进行封装。例如,我们可以创建一个api.js文件,将所有的API请求都封装在这个文件中: ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:3000/api', timeout: 5000, }); export const getUser = () => api.get('/user'); export const addUser = (data) => api.post('/user', data); export const updateUser = (id, data) => api.put(`/user/${id}`, data); export const deleteUser = (id) => api.delete(`/user/${id}`);``` 上面的代码中,我们使用axios.create方法创建了一个axios实例,并设置了baseURL和timeout。然后,我们分别封装了获取用户、添加用户、更新用户和删除用户的API请求,并通过export导出这些方法。 在其他文件中,我们可以直接引入这些方法,并调用它们: ```javascript import { getUser, addUser, updateUser, deleteUser } from './api'; getUser() .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值