原生js怎么调用axios

原生JS调用Axios的步骤：

安装Axios、导入Axios、配置Axios实例、进行GET请求、进行POST请求

在使用原生JavaScript调用Axios之前，首先需要了解Axios是什么以及它的基本用法。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以用来发送异步HTTP请求，能够处理请求和响应的拦截器，支持取消请求等功能。

安装Axios

在使用Axios之前，首先需要通过npm或CDN安装Axios。最常用的方法是通过npm安装：

npm install axios

或者通过CDN引入：

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

导入Axios

在Node.js环境中，使用CommonJS模块语法导入Axios：

const axios = require('axios');

在浏览器环境中，如果使用了CDN引入，则不需要再导入Axios，直接使用即可。

配置Axios实例

为了更好地管理请求，可以创建一个Axios实例，并设置一些默认配置：

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

进行GET请求

使用Axios进行GET请求非常简单，只需要调用axios.get方法即可：

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功的响应
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误的响应
    console.log(error);
  });

或者使用配置好的Axios实例：

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

进行POST请求

类似于GET请求，进行POST请求可以使用axios.post方法：

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

或者使用配置好的Axios实例：

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

一、安装和引入Axios

在使用原生JavaScript调用Axios之前，首先需要安装并引入Axios。可以通过npm安装或者使用CDN引入。

1. 使用npm安装Axios

在项目根目录下运行以下命令来安装Axios：

npm install axios

安装完成后，可以在JavaScript文件中导入Axios：

const axios = require('axios');

2. 使用CDN引入Axios

可以在HTML文件中通过CDN引入Axios：

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

引入后，可以在JavaScript代码中直接使用axios对象。

二、创建Axios实例

为了更好地管理和配置请求，建议创建一个Axios实例。通过实例可以设置一些默认配置，如基础URL、请求超时时间和默认头部信息。

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

使用实例进行请求时，会自动使用这些默认配置。

三、发送GET请求

发送GET请求是最常见的HTTP请求类型之一，可以使用axios.get方法来完成。

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功的响应
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误的响应
    console.log(error);
  });

或者使用配置好的Axios实例：

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

四、发送POST请求

发送POST请求可以使用axios.post方法，将数据作为第二个参数传递。

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

或者使用配置好的Axios实例：

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

五、处理响应和错误

Axios会返回一个Promise，可以通过then方法处理成功的响应，通过catch方法处理错误的响应。

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功的响应
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误的响应
    console.log(error);
  });

六、请求和响应拦截器

Axios提供了请求和响应拦截器，可以在请求发送前和响应接收后进行一些操作。

1. 请求拦截器

可以在请求发送前对请求进行一些处理，如添加token等。

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

2. 响应拦截器

可以在接收到响应后对响应进行一些处理，如统一处理错误信息等。

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

七、取消请求

Axios支持取消请求，可以使用CancelToken来实现。

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

八、并发请求

可以使用axios.all方法处理多个并发请求。

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.data);
    console.log(perms.data);
  }));

九、在项目团队管理系统中的应用

在项目团队管理系统中，常常需要进行各种API请求，如获取项目列表、更新任务状态等。推荐使用以下两个系统来管理这些请求：

研发项目管理系统PingCode：PingCode是一款专为研发团队设计的项目管理系统，可以帮助团队高效管理项目、任务和代码库。通过Axios，可以轻松与PingCode的API进行交互，实现数据的同步和更新。
通用项目协作软件Worktile：Worktile是一款功能强大的项目协作工具，适用于各种类型的团队。使用Axios可以方便地与Worktile的API进行通信，获取项目数据、更新任务进度等。

通过以上步骤和示例，相信你已经掌握了如何在原生JavaScript中调用Axios，并在实际项目中应用。希望这些内容能够帮助你更好地使用Axios进行HTTP请求，提高开发效率。

相关问答FAQs：

1. 如何使用原生JS调用Axios发送GET请求？

问题： 如何使用原生JS调用Axios发送GET请求？

回答：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头部
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send();

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

2. 如何使用原生JS调用Axios发送POST请求？

问题： 如何使用原生JS调用Axios发送POST请求？

回答：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('POST', 'https://api.example.com/data', true);

// 设置请求头部
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置请求体
var data = {
  name: 'John',
  age: 25
};
xhr.send(JSON.stringify(data));

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

3. 如何使用原生JS调用Axios发送带参数的GET请求？

问题： 如何使用原生JS调用Axios发送带参数的GET请求？

回答：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
var url = 'https://api.example.com/data?param1=value1&param2=value2';
xhr.open('GET', url, true);

// 设置请求头部
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send();

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3910134