前端 js 怎么写接口类
时间: 2024-06-07 09:11:54 浏览: 3
在前端中,可以使用 XMLHttpRequest 或者 Fetch API 来向服务器发送请求并接收响应。如果需要将多个请求封装成一个类,可以使用以下方式:
```javascript
class API {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
get(url) {
return fetch(`${this.baseUrl}${url}`)
.then(response => response.json())
.catch(error => console.error(error));
}
post(url, data) {
return fetch(`${this.baseUrl}${url}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.catch(error => console.error(error));
}
// 其他请求方法
}
```
以上是一个简单的 API 类,它有一个 baseUrl 属性和多个请求方法,这些方法都使用 Fetch API 发送请求并返回 Promise。可以根据需要添加其他请求方法,如 PUT、DELETE 等。使用时,可以先实例化这个类,然后使用它的方法发送请求:
```javascript
const api = new API('https://example.com/api');
api.get('/users')
.then(data => console.log(data))
.catch(error => console.error(error));
api.post('/login', { username: 'example', password: 'password' })
.then(data => console.log(data))
.catch(error => console.error(error));
```
这样就可以方便地管理和发送请求了。当然,这只是一个简单的示例,实际情况中可能需要添加更多功能和处理更多异常情况。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)