Axios入门使用

文章目录

Axios入门使用
- 一、引言
- 二、Axios的安装与配置
- - 1、安装Axios
  - 2、创建Axios实例
- 三、发送HTTP请求
- - 1、GET请求
  - 2、POST请求
  - 3、并发请求
- 四、配置和拦截器
- - 1、配置默认值
  - 2、拦截器
- 五、错误处理和取消请求
- - 1、错误处理
  - 2、取消请求
- 四、总结

Axios入门使用

一、引言

随着前端技术的发展，前后端分离已成为标准开发模式。Axios作为一种基于Promise的HTTP客户端，被广泛应用于浏览器和node.js中，用于执行HTTP请求。本篇博客将详细介绍Axios的基本使用。

二、Axios的安装与配置

1、安装Axios

首先，需要安装Axios库。可以通过npm或yarn进行安装：

npm install axios

或者

yarn add axios

也可以通过CDN直接引入到HTML文件中：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2、创建Axios实例

Axios可以创建实例，以便于根据不同的环境进行配置：

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

三、发送HTTP请求

1、GET请求

使用Axios发送GET请求非常简单，如下所示：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

也可以通过params对象传递查询参数：

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、POST请求

发送POST请求，可以使用以下代码：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、并发请求

Axios支持并发请求，可以同时发送多个请求并统一处理：

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    //两个请求现已完成
    console.log(acct, perms);
  }));

四、配置和拦截器

1、配置默认值

可以为Axios设置默认值，例如：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

2、拦截器

Axios支持添加请求和响应拦截器：

// 添加请求拦截器
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);
});

五、错误处理和取消请求

1、错误处理

Axios可以通过catch方法来处理错误：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但是服务器响应的状态码不在2xx范围内
      console.log(error.response.data);
      console.log(error.response.status);
    } else {
      // 一些在设置请求时触发的错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

2、取消请求

Axios支持取消请求：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor函数接收一个cancel函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel('Operation canceled by the user.');