axios实现封装api
时间: 2023-01-11 09:55:36 浏览: 125
前端axios请求封装
axios 是一个基于 Promise 的 HTTP 库,可以用来发送 HTTP 请求。你可以使用 axios 来封装 API,这样你就可以在你的代码中方便地使用 API。
下面是一个示例,展示了如何使用 axios 封装 API:
```
import axios from 'axios';
const API_BASE_URL = 'https://api.example.com';
const api = {
getTodos() {
return axios.get(`${API_BASE_URL}/todos`);
},
addTodo(todo) {
return axios.post(`${API_BASE_URL}/todos`, todo);
},
deleteTodo(todoId) {
return axios.delete(`${API_BASE_URL}/todos/${todoId}`);
}
};
export default api;
```
在上面的示例中,我们定义了一个 api 对象,并且为它定义了三个方法:getTodos、addTodo 和 deleteTodo。每个方法都会发送一个 HTTP 请求,并返回一个 Promise,你可以在你的代码中使用这些方法来调用 API。
例如,你可以在组件中使用这些方法来获取数据:
```
import api from './api';
class TodoList extends React.Component {
state = {
todos: []
}
componentDidMount() {
api.getTodos()
.then(response => {
this.setState({ todos: response.data });
});
}
render() {
const { todos } = this.state;
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}
}
```
希望这个示例能帮助你理解 axios 如何用来封装 API。
阅读全文