首页 > 代码编程 > 前端开发 > axios js(AxiosJS简明教程)

axios js(AxiosJS简明教程)

2023-06-27 前端开发 42 ℃ 0 评论

什么是axios js?

axios js是一个基于promise的HTTP请求库,可以用于浏览器和Node.js。它是对XMLHttpRequest和fetch api的封装,并且提供了许多易于使用的强大功能,例如拦截请求和响应、自动转换JSon数据等。使用axios js可以方便、简洁、高效的进行HTTP请求,是现代前端开发中必不可少的工具。

如何使用axios js?

使用axios js可以分为四个基本步骤:

引入axios js

进行HTTP请求

处理响应数据

处理错误情况

引入axios js

在使用axios js之前,需要先安装axios js依赖:

npm install axios

安装完成后,在需要使用axios js的地方引入即可:

import axios from 'axios';

进行HTTP请求

在axios js中,可以使用下面这些方法进行HTTP请求:

axios.get(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.delete(url[, config])

这些方法都返回promise对象,可以使用then和catch方法处理请求结果:

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

处理响应数据

在axios js中,响应数据存储在response对象的data属性中,可以直接访问:

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

console.log(error);

});

在请求时,可以通过配置项config设置数据的类型,axios js会自动将服务器返回的数据转换为指定类型,例如json:

axios.post('/user', {

firstName: 'John',

lastName: 'Doe'

}, {

headers: {

'Content-Type': 'application/json'

}

})

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

console.log(error);

});

处理错误情况

在进行HTTP请求时,可能会出现错误,例如请求超时、网络错误等。axios js可以通过catch方法捕获这些错误:

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

if (error.response) {

// 服务器返回错误状态码

console.log(error.response.data);

console.log(error.response.status);

console.log(error.response.headers);

} else if (error.request) {

// 请求发出但无响应

console.log(error.request);

} else {

// 其他错误

console.log('Error', error.message);

}

console.log(error.config);

});

拦截请求和响应

在axios js中,可以使用interceptors拦截请求和响应,可以方便地处理请求和响应数据,实现全局的错误处理、loading等功能。

拦截器可以使用use方法添加,也可以使用eject方法删除:

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response;

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error);

});

// 删除请求拦截器

let myInterceptor = axios.interceptors.request.use(function () {/* ... */});

axios.interceptors.request.eject(myInterceptor);

总结

通过本篇文章我们了解了axios js的基本用法和一些重要功能,包括HTTP请求、处理响应数据、处理错误情况和拦截请求和响应。

axios js是现代前端开发不可或缺的工具,可以方便、简洁、高效地进行HTTP请求,值得我们深入学习和使用。

炮渣日记