axios js(AxiosJS简明教程)

什么是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请求，值得我们深入学习和使用。