axios安装
vue3中安装axios有很多种方法,最容易的方法是可以使用CDN的方式安装axios,如果我们使用模块化开发,就需要使用npm安装方式,除了npm
还可以使用yarn
安装。安装成功后,在vue脚手架项目中使用axios,我们可以结合vue-axios
插件一起使用,这个插件就是将axios继承到vue的简单封装中,单独的话不能使用,需要安装axios一起使用。然后就可以在组件内通过this.axios
调用axios的方法发送请求。
npm install axios --save;
npm install axios vue-axios
axios发送最多的请求方式就是post
请求和get
请求。get()
方法接收的是一个url作为参数,将要发送的数据以字符串的形式拼接到url后面,如果发送成功,我们可以去调用then
方法中的回调,然后在回调函数中处理数据。如果发送失败,我们可以去调用catch
方法的回调,在回调中处理错误的信息并将错误信息展示出来。除了我们附加查询参数的方法,我们还可以给get传递一个params
字段的配置对象作为参数,里面存放的是需要发送的数据。异步请求的话可以使用async/await
。
axios发送post请求是将数据存放到请求体中,post
方法比get方法会多一个参数,这个参数是一个对象,对象的属性是要发送的数据,当服务器接收到请求并响应后,我们需要对信息进行处理。一般服务器返回的数据会有状态码,我们可以根据状态码的数值去判断对应的请求是否成功。当出现错误时,我们会调用catch()
方法中的回调,并传递一个错误的对象。我们还可以通过axios传递的相关配置来创建请求。请求方式默认为get。aixos库还可以支持所有的请求方式进行别名,我们使用别名方法的时候,url
和method
以及data
等属性是不需要在配置对象中指定的。这个库中的配置对象中常用的配置有params、methods和headers等,其中url
是请求服务器的url,methods
存放的是请求的请求方式,headers
是发送的自定义请求头。timeout
指定请求超时的毫秒值,默认值是0,表示无超时事件。params
是与请求一起发送的url参数。data
是作为请求体发送的数据。withCredentials
表示跨域请求时是否需要使用凭证。
axios('/web?id=2');
axios({
method:'get',
url: 'xxx',
responeseType: 'xx'
}).then()