Axios获取并发布示例-DEV365 开发者社区

本文最初发表在DeadSimplechat博客上：Axios GET and POST examples

在本文中，我们将了解如何使用Axios发送和发布请求。 Axios是浏览器和Node.js Server的基于承诺的HTTP客户端。

Axios可以在浏览器和服务器上运行相同的代码。

在nodejs服务器端，它使用http模块，在浏览器端，它使用xmlhttprequests

我们将在下面了解有关Axios的更多信息，以及如何发送和接收http请求并获取

的详细示例

ðâ
DeadSimplechat的新手？这是转弯键聊天，您可以轻松地将其添加到网站或应用程序中，而无需任何复杂的代码。对于虚拟 /现场活动，SaaS应用程序，社交平台，教育，游戏，金融注册免费< / p>

安装轴

有多种安装Axios的方法。这是一些

使用npm：

$ npm install axios

使用鲍尔

$ bower install axios

使用纱线：

$ yarn add axios

使用CDN：

JSDELIVR和UNPKG都为Axios提供CDN Scirpts

//using JsDelivr
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// using unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

现在我们已经安装了Axios。让我们介绍一个简单的示例，说明如何发送请求

ðâ€deadSimplechat？这是转弯键聊天，您可以轻松地将其添加到网站或应用程序中，而无需任何复杂的代码。对于虚拟 /现场活动，SaaS应用程序，社交平台，教育，游戏，金融注册免费< / p>

用JSON提出邮政请求

现在让我们使用Axios创建一个邮政请求，并在那里发送JSON数据

首先让我们在项目中需要Axios，例如：

const axios = require('axios').default;

// axios.<method> will now provide autocomplete and parameter typings

现在创建一个邮政请求

axios.post('/addCandy',{
    candyName: 'Mars Bar',
    quantity: '24'
});

我们在做什么

我们正在使用axios.post在路径 /addcandy上提出邮政请求，并且与邮政请求一起发送JSON数据

{
    candyName: 'Mars Bar',
    quantity: '24'
}

接收此帖子请求的服务器将将此数据保存在其数据库中，并将响应回复为200个响应代码，或者将发送响应，即与相应的响应代码和相应的响应代码以及错误消息

我们需要记录服务器发送的消息和代码，我们将下一个执行此操作

axios.post('/addCandy',{
    candyName: 'Mars Bar',
    quantity: '24'
}).then(function(response){
    console.log(response)
})

另外，可能会遇到我们在提出请求时犯了一个错误，并且正在发生错误。

我们也需要捕获该错误。让我们添加另一行代码以捕获该错误

 .catch(function (error) {
    console.log(error);
  });

完整的代码看起来像

axios.post('/addCandy',{
    candyName: 'Mars Bar',
    quantity: '24'
}).then(function(response){
    console.log(response)
})
.catch(function (error) {
    console.log(error);
  });

也可以通过将相关配置传递给Axios
来发送发布请求

axios(config);

//sending a post request
axios({
  method: 'post',
  url: '/addCandy',
  data: {
    candyName: 'Mars Bar',
    quantity: '24'
  }
});

还有一些别名方法可以用作上述方法的替代方法

axios.post(url,[data[,config]])

使用异步/等待的Axios提出发布请求

使用Axios提出后请求的更简单的方法是使用异步等待关键字

使用HTTP标头发布请求

将HTTP标头添加到我们的POST请求中非常容易。只需将标题添加到配置

//sending a post request
axios({
  method: 'post',
  url: '/addCandy',
  data: {
    candyName: 'Mars Bar',
    quantity: '24'
  },
  headers: {'X-Custom-Header': 'foobar'}
}).then(function(response){
    console.log(response)
});

使用帖子处理错误并获取请求

使用Axios处理错误请求非常容易。这是如何处理Axios
的错误请求的示例

//sending a post request
axios({
    method: 'post',
    url: '/addCandy',
    data: {
      candyName: 'Mars Bar',
      quantity: '24'
    }
  }).catch(function (error) {
    if(error.response){
        // the request was made and the server responded with the response code that is out of 2xx
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
    } else if (error.request) {
        // the request was made but no response was recieved the `error.request` is an instance of XMLHttpRequest in the browser and a instance of http.ClientRequet in Node.Js
        console.log(error.request);
    }else {
        // Something happened that triggered an error
        console.log('error', error.message);
    }
    console.log('err',error.config);
  });

我们在这里做什么

我们正在使用Axios发送发布请求并捕获其错误发生

如果错误具有2XX成功代码中的响应代码，则我们正在记录服务器返回的数据，响应代码和HTTP标头，以更好地了解为什么发生错误

如果我们发送的请求有一些问题，那么我们将其记录到控制台

如果请求或响应没有问题，并且还有其他错误，而我们也将其记录到控制台

最后，如果配置有问题，那么我们将其记录到控制台

VAILATETESTATUS配置选项

使用ValidateStatus配置选项，我们可以定义应该丢弃错误的HTTP代码。例如

axios.get('/get-candies', {
  validateStatus: function (status) {
    return status < 500; // Resolve only if the status code is less than 500
  }
})

使用Tojson

如果您需要有关HTTP错误代码的更多信息，则可以使用TOJSON函数将错误代码转换为JSON。

这将为您提供有关错误的更多信息。

axios.get('/get-candies')
  .catch(function (error) {
    console.log(error.toJSON());
  });

用JSON与Axios获取请求

首先让我们将Axios添加到我们的项目

const axios = require('axios').default;

，让我们提出请求

// Make a request for candies
axios.get('/get-candies')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

我们正在向url'/get-candies'提出请求，以获取服务器的糖果列表。然后，我们正在记录从服务器到控制台的响应。

服务器可能会以糖果列表以及2XX响应代码的形式为我们提供数据，或者服务器可能会给我们一个错误

如果服务器给我们一个错误，我们将该错误记录到控制台

现在，我们可能要在我们的请求中添加params，例如

// Make a request forcandies from a brand name
axios.get('/get-candies?brand="mars"')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

现在，我们添加了一个params，例如？parametername = value

我们还可以使用替代方法
提出GET请求

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

此方法与以前的方法相似，唯一的是我们对可读性有所更改的配置，并且在发送请求时，更容易传递多个参数

使用异步/等待Axios获得请求

使用异步 /等待关键字提出请求也很容易。请记住，尽管像IE这样的较旧浏览器不支持异步关键字。

var candies = async function getCandies() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

这样，我们可以使用异步 /等待关键字发送获取请求< / p>

ðâ
DeadSimplechat的新手？这是转弯键聊天，您可以轻松地将其添加到网站或应用程序中，而无需任何复杂的代码。对于虚拟 /现场活动，SaaS应用程序，社交平台，教育，游戏，金融注册免费< / p>

拦截REQ和RES

您可以拦截他们处理的请求或响应，或者捕获

创建一个像

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

，如果您需要添加响应拦截器，则

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

如果您需要以后在代码中删除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

响应模式

请求的响应模式如下。您可以使用响应模式来记录与您相关的信息

{
  // Response provided by the server is data
  data: {},

  // HTTP code sent by the server is status
  status: 200,

  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

您可以记录与您相关的信息

axios.get('/candies')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

如何取消请求

您可以使用abortcontroller取消Axios请求

const controller = new AbortController();

axios.get('/candies', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

注意Canceltoken API自版本V0.22.0以来已被编写，并且不再使用较新版本

URL编码而不是JSON

默认情况下，Axios在JSON中序列化的主体对象，但是如果您希望在应用程序/X-WWW-Form-urlenced中发送请求，则可以使用以下选项

进行操作

在浏览器中

const params = new URLSearchParams()

params.append('param1', 'value1');
params.append('param2', 'value2');

axios.post('/send-candy',params);

请注意，所有浏览器都不支持urlsearchparams

在node.js中

使用Querystring模块您可以发送请求，例如

const querystring = require('querystring');
axios.post('https://candies.com/', querystring.stringify({ candy: 'mars bar' }));

结论

在本文中，我用示例解释了如何发送帖子并获得Axios

的请求