Vue方向:axios的理解与简单使用

1、网络请求的方式

发送网络的请求方式有很多种,到目前为止,已了解过原生ajax,jquery中的ajax,等诸多网络的请求的方式。

1.1 原生的Ajax

原生的Ajax是基于XMLHttpRequest(XHR)封装的

我们都知道原生的ajax不但有兼容问题,而且配置和调用都比较混乱复杂,这不推荐使用。

1.2 jquery中的Ajax

JQuery的ajax相对于原生的ajax来说非常好用,但是JQuery的ajax是嵌入在整个JQuery中的,因此如果我们要使用JQuery的ajax,就需要引入整体的jquery但是在Vue项目的整个开发过程中都不需要在使用JQuery,只为了用一个ajax,引入整体的JQuery,因此,并不推荐使用。

1.3  Vue在1.X版本是推出了Vue-resource插件

Vue-resource相较于JQuery要轻量很多,但是Vue从2.X以后就表示不再更新维护了,如果使用它处理Ajax请求,未来代码的维护上,是有很多的安全隐患的,包括现在vue官网也不推荐使用vue-resource处理ajax,vue官网推荐使用axios处理ajax.

1.4  axios请求

axios的优点:除了数据请求之外,还有包括fetch,jsonp等很多方式帮我们处理数据请求。


2、axios请求的了解与使用

2.1  axios请求的特点

1.  支持node端和浏览器端:同样的API,node和浏览器全支持,平台切换无压力

2.  支持Promise:使用Promise管理异步,告别传统的callback方式

3.  丰富的配置项:支持请求和响应的拦截,提前处理请求和响应数据

2.2.1  安装axios包

             npm  install  axios

2.2.2   引入使用axios

             //引入包

             import  axios  from  "axios"

2.2.3   发送基本的请求

            //使用axios(get请求

           axios({

                 url:"http://api.github.com/users"

            }).then( (result) => {

                  console.log(result);

            })

注意:没有请求类型,axios默认请求为get请求,如果希望发送post 等其他方式的请求,可以在配置对象中添加method选项

              // 使用axios(post请求

                axios({

                    url:"https://jsonplaceholder.typicide.com/posts",

                    method: "post"

                }).then( (result) => {

                    console.log(result);

                })

2.2.4  配置对象中指定get请求参数

可以像传统的get请求参数一样在url路径后面拼接请求数据

               axios({

                    url:"https://jsonplaceholder.typicide.com/posts?userId=1",

               }).then( (result)  =>  {

                      console.log(result);

                })

也可以将get请求的数据放在axios的配置对象中,例如:将get请求数据放在配置对象的params选项中

                axios({

                        url:"https://jsonplaceholder.typicide.com/posts",

                        params:{

                                userId : 1

                        }

                 }).then( (result)  => {

                         console.log(result);

                  })

3、axios的请求方式

1.  axios(config)

2.  axios.request(config)

3.  axios.get(url[, config ])

4.  axios.delete(url[, config ])

5.  axios.head(url[, config ])

6.  axios.options(url[, config ])

7.  axios.post(url[, data[, config] ])

8.  axios.put(url[, data[, config] ])

9.  axios.patch(url[, data[, config] ])

在axios()请求的配置对象中配置请求方式,axios也提供了通过不同的方式发送请求。

指定了请求方式发送请求说明

1.  第一个参数将是发送的url

2.  第二个参数是请求的配置对象,可以省略,使用默认配置

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容