一、axios基本使用
axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js环境中。可以发送GET、POST、PUT、DELETE等HTTP请求,支持Promise API,可以拦截请求和响应,也可以使用浏览器的XHR api发送请求。
下面是一个简单的例子:
axios.get('/user?id=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
其中,axios.get()会返回一个Promise,当Promise被resolve时候,会传递response参数。
二、发送application/json格式的数据
当需要传递json格式的数据时,可以使用以下方法:
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }, { headers: { 'Content-Type': 'application/json' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
其中,使用headers指定Content-Type为application/json,服务器可以通过request的Content-Type来判断请求数据的格式。
三、处理application/json格式的响应数据
当服务器响应的数据格式为application/json时,axios会自动将响应数据解析为json格式。
axios.get('/user?id=12345') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
其中,response.data为服务器响应的json数据,可以直接使用。
四、拦截请求和响应
axios可以使用interceptors完成请求和响应的拦截。
axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
其中,interceptors.request用于拦截请求,interceptors.response用于拦截响应。其中两个匿名函数都需要返回一个Promise。
五、总结
通过以上例子,我们可以知道axios是一个非常强大的HTTP客户端,可以处理复杂的请求和响应数据格式。通过拦截器,还可以对请求和响应进行统一处理。以上是axios和application/json格式的使用方法,写得比较简单,实际使用中还可以更加灵活地使用axios完成各种HTTP请求。