《axios基础介绍》

在现代Web开发中，前后端交互是必不可少的一环。为了简化这个过程并提高代码的可维护性，axios是一个非常优秀的解决方案。它是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。通过axios，开发者可以方便地发送各种类型的HTTP请求，如GET、POST等，并且能够轻松处理请求和响应的数据。

一、安装与引入

如果是在浏览器环境中使用，可以通过以下方式引入：

html</p>



<p>

如果是基于Node.js项目或者使用构建工具（如webpack）的前端项目，可以使用npm进行安装：

bash
npm install axios

然后在代码文件中引入：
javascript
const axios = require('axios');
// 或者在ES6模块化语法中
import axios from 'axios';


二、基本的GET请求

当需要从服务器获取数据时，可以使用GET请求。例如，假设我们要从一个API获取用户信息：

javascript
axios.get('/api/userInfo')
.then(function (response) {
// 处理成功的情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误的情况
console.log(error);
});

这里/api/userInfo是要请求的接口地址，response.data就是从服务器返回的数据。

三、POST请求提交数据

有时候我们需要向服务器发送数据，这时就可以用POST请求。比如向服务器提交登录信息：

javascript
axios.post('/api/login', {
username: 'testUser',
password: '123456'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

我们把要发送的数据作为第二个参数传递给post方法。

四、配置请求与

请求配置

对于一些通用的请求设置，如设置请求头等，可以这样：

javascript
axios({
method: 'get',
url: '/api/data',
headers: {
'Authorization': 'Bearer mytoken'
}
}).then(/*...*/).catch(/*...*/);


还可以设置来对请求或响应进行预处理。例如，在请求发出前添加token验证，或者在响应到达后统一处理错误提示：

javascript
// 添加请求
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers.token = localStorage.getItem('token'); // 假设token存储在localStorage中
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });</p>

<p>// 添加响应
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    if(error.response.status === 401){
      alert('登录已过期，请重新登录');
    }
    return Promise.reject(error);
  });

以上就是关于axios的一些基础内容，它为我们的网络请求提供了简洁而强大的功能，让开发变得更加高效便捷。

// 来源：https://www.nzw6.com