什么是 srapi?
srapi 是一个功能齐全的前端 API 请求库，可以轻松地在你的应用程序中发送 GET、POST、PUT、DELETE 等请求。它支持 Promise 和 async/await 语法，支持请求取消，支持拦截器，支持请求错误处理等等。
下面我们来一步步学习如何使用它。
安装 srapi
可以通过 npm 安装 srapi:
npm install srapi
引入并初始化 srapi
import srapi from 'srapi'
const sra = srapi.create({
baseURL: 'https://example.com',
headers: {'Authorization': 'Bearer ' + accessToken}
})其中，create 函数接受一个配置对象，里面可以设置 baseURL，也可以设置 headers。
发送 GET 请求
sra.get('/api/users/1')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})sra.get 接收一个 url 参数，返回一个 Promise。当请求成功时，会得到一个响应对象，响应数据可以通过 response.data 获取。当请求失败时，会得到一个错误对象。
发送 POST 请求
-- -------------------- ---- ------- ---------------------- - ----- ------- ---- -- -- -------------- -- - ---------------------------- -- ------------ -- - ------------------ --
sra.post 接收两个参数，url 和 data。url 与 sra.get 一样，data 是请求数据。请求成功时，可以通过 response.status 获取响应状态码。
使用 async/await
async function getUsers() {
try {
const response = await sra.get('/api/users')
console.log(response.data)
} catch (error) {
console.log(error)
}
}使用 async/await，可以使代码更加简洁和易读。使用 try/catch 语句可以更好的处理请求错误。
请求取消
srapi 支持请求取消，当一个请求被取消后，它将不再产生任何影响。
-- -------------------- ---- -------
----- ------ - --------------------------
--------------------- - ------------ ------------ --
-------------- -- -
--------------------------
--
------------ -- -
-- ----------------------- -
--------------------
- ---- -
------------------
-
--
-- ----
------------- -- -
------------------------
-- ----我们可以通过 srapi.CancelToken.source() 来创建一个 cancel token，然后把它作为请求配置中的 cancelToken 参数来使用。当请求被取消时，会错误会被捕获到，并且可以使用 srapi.isCancel 来判断是否是取消错误。
拦截器
我们可以使用拦截器，在请求或响应前执行自定义逻辑，比如添加公共参数，自定义错误处理等等。
-- -------------------- ---- ------- -- -- ------------- --- ----------------------------------- -- - ---------------------------- - ------- - - ----------- ------ ------ -- -- ------ -------------------------------------- -- - ------ -------- -- ----- -- - --------------------- -------------- --
sra.interceptors.request.use 可以用来在请求前添加公共参数或者添加 headers 信息。sra.interceptors.response.use 可以用来在响应前进行统一错误处理。
拦截器提供了更加灵活的请求和响应处理，可以很好的封装公共逻辑。
总结
本文简要介绍了 srapi 的基本用法，包括初始化、发送请求、取消请求、拦截器等。通过使用 srapi，我们可以很方便的发送请求，处理错误，拦截请求和响应，提供更好的用户体验。
通过学习和使用 srapi，可以帮助我们更好的理解和掌握前端 API 请求相关的知识和技术，希望这个教程对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ffd81e8991b448ddcd1