js axios|极客笔记

js axios

一、axios简介

js axios

1.1 什么是axios

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js的简单封装。它是一个功能强大且易于使用的JavaScript库，可以在浏览器和服务器端发送HTTP请求，处理响应数据。axios支持各种平台，能有效地处理异步请求。

1.2 axios的特点

axios具有以下特点：

支持浏览器和node.js。
使用Promise进行异步操作。
支持拦截请求和响应。
支持取消请求。
提供了丰富的参数配置。
支持多种请求方法。

二、使用axios发送HTTP请求

2.1 安装axios

使用npm安装axios，命令如下：

npm install axios

2.2 创建axios实例

在使用axios发送请求之前，我们需要先创建一个axios的实例。我们可以使用axios.create方法来创建实例，示例代码如下：

const axios = require('axios');

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
});

在上述代码中，我们通过axios.create方法创建了一个实例。可以设置一些默认的配置项，例如baseURL和timeout。baseURL表示请求的基础URL，timeout表示请求超时时间。

2.3 发送GET请求

使用axios发送GET请求非常简单。我们可以使用实例的get方法来发送GET请求，示例代码如下：

// 发送GET请求
instance.get('/user', {
  params: {
    id: 1,
    name: 'John'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在上述代码中，我们通过实例的get方法发送了一个GET请求，请求的URL是/user。我们可以通过向第二个参数传递一个对象来设置请求参数，例如设置查询参数。

2.4 发送POST请求

发送POST请求也非常简单。我们可以使用实例的post方法来发送POST请求，示例代码如下：

// 发送POST请求
instance.post('/user', {
  id: 1,
  name: 'John'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在上述代码中，我们通过实例的post方法发送了一个POST请求，请求的URL是/user。我们可以通过向第二个参数传递一个对象来设置请求参数，例如传递请求体数据。

三、配置axios

3.1 基础配置

我们可以在创建axios实例时设置一些基础配置。例如，我们可以设置baseURL、timeout等参数。示例代码如下：

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
});

在上述代码中，设置了baseURL为http://api.example.com，超时时间为5000毫秒。

3.2 拦截请求和响应

axios提供了拦截器，可以在发出请求之前和收到响应之后对其进行操作。我们可以使用axios.interceptors.request.use方法添加请求拦截器，使用axios.interceptors.response.use方法添加响应拦截器，示例代码如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('请求拦截器', config);
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('响应拦截器', response);
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

在上述代码中，我们在请求拦截器中输出了请求的配置信息，在响应拦截器中输出了响应的数据。

3.3 取消请求

在某些情况下，我们可能需要取消一个已经发送的请求。axios提供了取消请求的功能。我们可以使用CancelToken来创建一个取消令牌，然后发送请求时将取消令牌传递给请求配置，示例代码如下：

const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel();

在上述代码中，我们创建了一个取消令牌，然后将取消令牌作为配置项传递给请求。当我们需要取消请求时，调用取消函数即可。

四、使用示例

下面是一个完整的使用axios发送HTTP请求的示例代码：

const axios = require('axios');

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
});

instance.interceptors.request.use(function (config) {
  console.log('请求拦截器', config);
  return config;
}, function (error) {
  return Promise.reject(error);
});

instance.interceptors.response.use(function (response) {
  console.log('响应拦截器', response);
  return response;
}, function (error) {
  return Promise.reject(error);
});

instance.get('/user', {
  params: {
    id: 1,
    name: 'John'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在上述代码中，我们创建了一个axios实例，并对请求和响应进行了拦截处理。然后，我们发送了一个GET请求，并处理了成功和失败的情况。