0
点赞
收藏
分享

微信扫一扫

vue3中axios的使用(一)


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()

举报

相关推荐

0 条评论