Axios库资料入门教程

Axios 是一个基于 Promise 的 JavaScript 库，用于发送网络请求。它可以在浏览器和 Node.js 中运行，具备一致的 API。Axios 可以方便地发出 HTTP 请求，并且可以处理各种请求方法和响应类型。

Axios是什么

Axios 是一个基于 Promise 的 JavaScript 库，用于发送网络请求。它支持浏览器和 Node.js 环境，可以方便地发出 HTTP 请求并处理响应。Axios 的设计初衷是作为 XMLHttpRequest 的替代品，提供更流畅的 API 体验。

Axios的特点和优势

Axios 的主要特点和优势如下：

1. 基于 Promise：Axios 使用 Promise API 以更简单的方式进行异步处理，使得代码更简洁易读。
2. 浏览器和 Node.js 支持：Axios 可以在浏览器和 Node.js 中运行，具备一致的 API。
3. 拦截请求和响应：可以轻松地拦截请求和响应，以便在发送请求或接收响应之前进行处理。
4. 自动转换 JSON：Axios 自动将 JSON 响应转换为 JavaScript 对象，简化了数据处理过程。
5. 响应拦截器：提供了处理错误响应的拦截器，可以自定义错误处理逻辑。
6. 超时支持：可以设置请求超时时间，避免请求长时间等待。
7. 跨域支持：Axios 自动处理 CORS（跨域资源共享）头信息。

通过npm安装Axios

Axios 可以通过 npm 安装。首先，确保已安装 Node.js 和 npm。然后，执行以下命令安装 Axios：

npm install axios

通过CDN引入Axios

如果不需要在 Node.js 环境下使用 Axios，可以通过 CDN 直接引入。在 HTML 文件中添加以下脚本：

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/axios/dist/axios.min.js"></script>

使用Axios发送请求

GET请求

使用 Axios 发送 GET 请求非常简单，可以通过 axios.get() 方法实现。以下是一个示例：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

POST请求

POST 请求可以通过 axios.post() 方法实现。以下是一个示例：

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

其他HTTP方法（PUT、DELETE等）

Axios 还支持其他 HTTP 方法，如 PUT、DELETE 等。以下是一个 PUT 请求的示例：

axios.put('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在实际应用中，可以根据需要选择合适的 HTTP 方法。

处理成功响应

Axios 的成功响应可以通过 .then() 方法处理。以下是一个示例：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理响应数据
  })
  .catch(error => {
    console.error(error); // 处理错误
  });

处理错误响应

Axios 的错误响应可以通过 .catch() 方法处理。以下是一个示例：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error(error.response.data); // 处理服务器响应中的错误
    } else if (error.request) {
      console.error(error.request); // 处理请求失败的情况
    } else {
      console.error(error.message); // 处理请求未发起的情况
    }
  });

处理请求的加载状态

Axios 提供了 axios.create() 方法来创建自定义实例，并可以配置拦截器来处理请求的加载状态。以下是一个示例：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.interceptors.request.use(function (config) {
  console.log('Request started:', config);
  return config;
}, function (error) {
  console.error('Request error:', error);
  return Promise.reject(error);
});

instance.interceptors.response.use(function (response) {
  console.log('Response received:', response);
  return response;
}, function (error) {
  console.error('Response error:', error);
  return Promise.reject(error);
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

设置默认配置

可以通过 axios.create() 方法创建一个 Axios 实例，并设置默认配置。以下是一个示例：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

配置请求拦截器

请求拦截器可以在请求发送之前添加自定义逻辑。以下是一个示例：

const instance = axios.create();

instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

配置响应拦截器

响应拦截器可以在响应接收之前添加自定义逻辑。以下是一个示例：

const instance = axios.create();

instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    alert('Unauthorized');
  }
  return Promise.reject(error);
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

常见错误及原因分析

1. 404 Not Found：请求的 URL 不正确或资源不存在。
2. 500 Internal Server Error：服务器端出现错误。
3. Network Error：网络问题导致请求失败。

跨域请求注意事项

跨域请求需要注意以下几点：

1. CORS：服务器端需要配置 CORS（跨域资源共享），设置允许的源和头部信息。
2. 代理服务器：在开发环境中使用代理服务器来处理跨域请求。
3. 使用代理服务器：通过配置 webpack 或其他工具在开发环境中设置代理服务器。

在开发环境中，可以使用 webpack 的 devServer 配置代理：

module.exports = {
  // 其他配置...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

通过以上配置，所有请求 /api/* 的 URL 都会被代理到 https://api.example.com。

总结，Axios 是一个强大且易于使用的 HTTP 客户端库，适用于浏览器和 Node.js 环境。通过配置默认选项和拦截器，可以轻松地处理和优化请求和响应处理。在遇到跨域请求时，需要正确配置 CORS 并考虑使用代理服务器来简化开发过程。希望本文能帮助你快速掌握 Axios 的使用方法和常见问题的解决办法。