axios请求详解

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一个易于使用的 API 来发起 HTTP 请求，并且具有许多高级功能，如拦截请求和响应、转换请求和响应数据、取消请求等。下面是 axios 的详细说明及其用法示例。

安装 axios

首先，你需要安装 axios 包。你可以使用 npm 或 yarn 来安装：

Bash
深色版本
npm install axios
# 或者
yarn add axios

基本用法

发起 GET 请求

Javascript
深色版本
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 访问响应数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

发起 POST 请求

Javascript
深色版本
axios.post('https://api.example.com/data', {
  key: 'value'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

配置选项

axios 提供了许多配置选项，可以通过传入一个配置对象来自定义请求行为。

配置示例

Javascript
深色版本
axios({
  method: 'post', // 请求方法
  url: 'https://api.example.com/data', // 请求 URL
  data: { // 请求体数据
    key: 'value'
  },
  headers: { // 自定义请求头
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

高级用法

1. 设置默认配置

你可以为 axios 设置全局的默认配置，也可以为每个请求单独设置默认配置。

全局默认配置

Javascript
深色版本
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 设置全局的 Authorization header

每个请求的默认配置

Javascript
深色版本
axios({
  url: '/data',
  method: 'get',
  params: { // 查询参数
    ID: 12345
  }
});

2. 拦截器

拦截器允许你在请求或响应被 axios 处理之前拦截它们。这非常有用，比如用来添加认证令牌、记录请求或响应时间等。

请求拦截器

Javascript
深色版本
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization = AUTH_TOKEN;
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截器

Javascript
深色版本
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

3. 取消请求

你可以使用 CancelToken 来取消请求。

创建 CancelToken

Javascript
深色版本
const source = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

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

4. 转换请求和响应数据

你可以在请求和响应之前转换数据。

转换请求数据

Javascript
深色版本
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}, {
  transformRequest: [function (data) {
    // 对请求数据做任意转换
    return JSON.stringify(data);
  }]
});

转换响应数据

Javascript
深色版本
axios.get('/user', {
  transformResponse: [function (data) {
    // 对响应数据做任意转换
    return JSON.parse(data);
  }]
});

实战案例

1. 发起带查询参数的 GET 请求

Javascript
深色版本
axios.get('https://api.example.com/data', {
  params: {
    ID: 12345,
    related: 'comments'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

2. 发起带身份验证的请求

Javascript
深色版本
axios.get('https://api.example.com/data', {
  auth: {
    username: 'john.doe',
    password: 's3cr3t'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

3. 发起带自定义请求头的请求

Javascript
深色版本
axios.post('https://api.example.com/data', {
  key: 'value'
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

总结

axios 是一个非常强大且灵活的 HTTP 客户端库，适用于现代 Web 开发。它不仅提供了简洁的 API 来发起 HTTP 请求，还支持许多高级功能，如请求和响应拦截、取消请求、转换请求和响应数据等。通过上述示例，你应该能够掌握 axios 的基本用法，并在实际项目中灵活运用。