introduction to Axios Axios is a promise-based HTTP library that can be used in browsers and node.js. Features supports node side and browser side supports advanced configurations such as interceptors use Promise to manage asynchrony, bid farewell to traditional callback mode automatically convert JSON data client supports defense of XSRF install yarn installation $ yarn add axios npm installation npm install axios -D 3.bower installation $ bower install axios easy to use aixos can be loaded directly through cdn, for example: <html> <head> <title>The use of Axios</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> </head> <body> <input type="button" onclick="getList()" value="Click get"/> <div id="content"> </div> <script type="text/javascript"> function getList(){ axios.request({ url:'/article/home/index', method:'get', baseURL:'http://test.mediastack.cn/' }).then( res => { console.log("get res:",res); var str=JSON.stringify(res); document.getElementById("content").innerHTML = str; },error => { console.log("get request failed:",error); document.getElementById("content").innerHTML = error; } ); } </script> </body> </html> axios is encapsulated in react Axios can be encapsulated into a file in react. Through control operations, unified handling of errors, logic, and validation can be achieved, reducing the redundancy and readability of the code. request encapsulation / * * * Network request configuration , / import axios from "axios"; axios.defaults.timeout = 100000; axios.defaults.baseURL = "http://test.mediastack.cn/"; / * * * http request interceptor , / axios.interceptors.request.use( (config) => { config.data = JSON.stringify(config.data); config.headers = { "Content-Type": "application/json", }; return config; }, (error) => { return Promise.reject(error); } ); / * * * http response interceptor , / axios.interceptors.response.use( (response) => { if (response.data.errCode === 2) { console.log("out of date"); } return response; }, (error) => { console.log("request error:", error); } ); / * * * encapsulate the…
