How to use axios in node.js

This article mainly introduces a summary of the experience of using axios in node.js, and analyzes the errors encountered in the process. Please refer to it.

Axios is a Promise-based HTTP library that can be used in browsers and node.js. Because of Youda’s recommendation, axios has become more and more popular. I have encountered some problems using axios in recent projects, so I will take this opportunity to summarize them. If there are any mistakes, please feel free to correct them.

Function

The browser initiates an XMLHttpRequests request

The node layer initiates an http request

Supports Promise API

Intercept requests and responses

Convert request and response data

Cancel request

Automatically convert JSON data

The client supports defense against XSRF (cross-site request forgery) )

Compatible

Use

npm

npm install axios

bower

bower install axios

cdn

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

Initiate a request

GET

axios.get('/user?ID=123')
  .then( res => {
    console.info(res)
  }).catch( e => {
    if(e.response){
    //请求已发出，服务器返回状态码不是2xx。
      console.info(e.response.data)
      console.info(e.response.status)
      console.info(e.response.headers)
    }else if(e.request){
      // 请求已发出，但没有收到响应
      // e.request 在浏览器里是一个XMLHttpRequest实例，
      // 在node中是一个http.ClientRequest实例
      console.info(e.request)
    }else{
      //发送请求时异常，捕捉到错误
      console.info('error',e.message)
    }
    console.info(e.config)
  })
// 等同以下写法
axios({
  url: '/user',
   method: 'GET',
  params: {
    ID: 123
  }
}).then( res => {
  console.info(res)
}).catch( e=> {
  console.info(e)
})

POST

axios.post('/user', {
  firstName: 'Mike',
  lastName: 'Allen'
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})
// 等同以下写法
axios({
  url: '/user',
  method: 'POST',
  data: {
    firstName: 'Mike',
    lastName: 'Allen'
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})

Notes

Params are used when passing parameters using the GET method, and the official documentation introduces: params are the URL parameters to be sent with the request. Must be a plain object or a URLSearchParams object. Translated as: params is sent as a parameter in the URL link in the request, and it must be a plain object or a URLSearchParams object. Plain object refers to an ordinary object defined in JSON form or a simple object created by new Object(); while the URLSearchParams object refers to an object that can be used to process the query string of the URL using some practical methods defined by the URLSearchParams interface. , that is to say, the params parameters are passed in the form of /user?ID=1&name=mike&sex=male.

When using POST, the corresponding parameter transfer uses data, and data is sent as the request body. This form is also used for PUT, PATCH and other request methods. One thing to note is that the default request body type of POST in axios is Content-Type: application/json (JSON specification is popular), which is also the most common request body type, which means that the serialized json format is used String to pass parameters, such as: { "name" : "mike", "sex" : "male" }; at the same time, the background must receive parameters in the form of supporting @RequestBody, otherwise the front-end parameters will be passed correctly and the background will receive situation.

If you want to set the type to Content-Type:application/x-www-form-urlencoded (browser native support), axios provides two methods, as follows:

Browser side

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/user', params);

However, not all browsers support URLSearchParams. Check caniuse.com for compatibility, but there is a Polyfill (polyfill: used to implement native APIs that the browser does not support) The code can be vaguely understood as a patch, and at the same time, ensure that the polyfill is in the global environment).

Alternatively, you can also use the qs library to format the data. By default, the qs library can be used after installing axios.

const qs = require('qs');
axios.post('/user', qs.stringify({'name':'mike'}));

node layer

querystring can be used in the node environment. Similarly, you can also use qs to format data.

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));

Supplement

There is another common request body type, namely multipart/form-data (native browser support), which is commonly used to submit form data a format. Contrast this with x-www-form-urlencoded, where data is encoded into key-value pairs separated by '&', while keys and values ​​are separated by '='. Characters that are not alphabetic or numeric are percent-encoded (URL encoding), which is why this type does not support binary data (multipart/form-data should be used instead).

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the China map in vue vuex axios echarts

Solve the problem of the input box being blocked by the input method

How to solve the problem that the soft keyboard blocks the input box in js

How to implement component interaction in Angular2

The above is the detailed content of How to use axios in node.js. For more information, please follow other related articles on the PHP Chinese website!