Axios.js 中文 API 有哪些关键功能和使用方法？

1. Axios简介

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js，它支持发送异步请求，并提供了拦截请求和响应、转换请求和响应数据等功能，Axios还自动将JSON数据转换为JavaScript对象，并在客户端支持防御XSRF（跨站请求伪造）。

特性

浏览器和node.js中创建XMLHttpRequests

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF

2. 安装与使用

通过npm安装

npm install axios

通过bower安装

bower install axios

通过CDN使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3. 基本用例

GET请求

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

POST请求

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

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // Two requests now complete
  }));

4. Axios实例

可以通过自定义配置创建一个axios实例：

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

5. 请求配置

Axios允许在发送请求时传递配置项：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

6. 响应结构

Axios返回的响应包含以下属性：

data: 服务器返回的数据，如果响应类型是blob或arraybuffer，这个字段将是null。

status: HTTP状态码。

statusText: HTTP状态消息。

headers: 服务器响应的头。

config: 请求的配置信息。

request: 请求对象。

7. 默认配置

Axios有一些默认的配置项，可以在创建实例时进行修改：

const defaults = axios.defaults;
console.log(defaults); // 查看默认配置项

8. 拦截器

Axios允许在请求或响应被处理前拦截它们：

axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with the error
  return Promise.reject(error);
});

9. 错误处理

Axios的错误处理机制非常灵活，可以通过catch方法捕获错误：

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx.
      console.log('Error Response:', error.response.data);
      console.log('Error Status:', error.response.status);
      console.log('Error Headers:', error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received.
      console.log('No Response Received:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error.
      console.log('Error Message:', error.message);
    }
    console.log(error.config);
  });

10. 取消请求

Axios允许取消未完成的请求：

let cancetoken = axios.CancelToken.source();
axios.get('/user/12345', { cancelToken: cancetoken.token })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // handle error
    }
  });
cancetoken.cancel('Operation canceled by the user.');

11. 并发处理助手函数

Axios提供了一些助手函数来处理并发请求：

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // Two requests now complete
  }));

12. 请求别名方法

Axios为所有支持的请求方法提供了别名，可以直接使用这些别名发起请求：

axios.request(config) // request方法别名，适用于所有请求方法。
axios.get(url[, config]) // GET请求别名。
axios.delete(url[, config]) // DELETE请求别名。
axios.head(url[, config]) // HEAD请求别名。
axios.post(url[, data[, config]]) // POST请求别名。
axios.put(url[, data[, config]]) // PUT请求别名。
axios.patch(url[, data[, config]]) // PATCH请求别名。

注意：在使用别名方法时，url、method和data属性不需要在配置中指定。

小伙伴们，上文介绍了“axios.js中文 api”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。