前端
一点也不简单

Vue.js进阶之路(axios、fetch)

在原生js中我们用ajax做数据请求,在jquery中我们有$.ajax的方法做数据请求,那么在Vue中我们用什么呢?

在Vue.js中我们要用到的有axios、fetch这两种方法

一、axios

1.axios简单介绍:

首先,这不是Vue.js自由的方法,这是一个第三方库,是需要引入第三方库的,这是在Vue.js项目中用的常见的方法

2.axios在Vue.js的基本使用

1).引入第三方库:

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

注意:这个要放在Vue.js文件下面,顺序及其重要

2).基本结构

<div id="app">
     <button @click="axiosGet">get</button>
     <button @click="axiosPost">post</button>
 </div>
<script>
   new Vue({
       el:'#app',
       data:{

       },
       methods:{
        //方法名可以自己随意取,我这里取axiosGet是为了方便区分
        axiosGet(){
        //get方法
        
        },
        axiosPost(){
        //post方法

        }
       },

   })
</script>

同ajax一样数据请求方式当然不止get和post还有all,delete等之类的,但不管是什么请求方式,都是如出一辙的,这里就讲讲get和post两个

3).axios中的get方法:

前面的结构都看了,这里我直接写axiosGet里面的东西

 axiosGet(){
   //get方法
   console.log( 
            axios.get('http://127.0.0.1:5500/Vue/day03/db/get.php',{
            params:{
                a:1,
                b:2
            }
        }))
   }) 
        
 }

这我们打印请求的结果,发现

AXIOS.get

返回的是一个Promise对象,显然我们这样是拿不到数据的,那么我们怎么拿呢???

答案是.then().catch()

 axiosGet(){
        //get方法
        axios.get('http://127.0.0.1:8080/1901/get.php',{
            params:{
                a:1,
                b:2
            }
        })
        .then(data=>{
            console.log(data.data)
            //之所以要.data是因为promise对象中有很多东西,然而里面的data里的才是我们要的数据
        })
        .catch(error=>{
            console.log(error)
        })

因为我的get.php里运算时a+b,所以应当输出3

这样就成功取到了

上面只是一种写法,还有一种

axiosGet(){
   //get方法
   axios({
         url: 'http://127.0.0.1:8080/1901/get.php',
         method: 'get',
         params: {
             a: 1,
             b: 2
         }
       })
       .then( res => {
          console.log( res )
       })
       .catch( error => {
          if( error ){
             throw error
           }
        }) 
        
 }

同样也可以输出得到结果,两者只是写法的不同罢了

3).axios中的post方法:

友情提示:无论是axios还是fetch的post请求都是有很大的坑的,并且别想着从官方文档找到答案,官方是错的,开始吧

axiosPost(){
    //post方法
    axios({
            url: 'http://127.0.0.1:8080/1901/post.php',
            method: 'post',
            params: {
             a: 1,
             b: 2
         }
          })
          .then(res => {
            console.log( res )
          })
          .catch( error => {
            if( error ){
              throw error
            }
          })
      }
 }

可能在大家的想法是这么写的但时,结局是出人意料的

axios.post
啊哈哈哈哈,996

这个错误很明显是a和b的值没有传过去,所以显然,我们这种提交方式是错误的,那么我们该怎么提交呢?

综合了一下各位博主的方法,大概可以分成3步

  • 统一设置请求头:
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  • 使用 URLSearchParams 实例化一个params对象
let params = new URLSearchParams()
  • 使用params对象的append方法添加数据,这里添加我的a和b
params.append('a',1)
params.append('b',2)

完整的如下:

<script>
    //1.设置header请求头
   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   //2.使用 URLSearchParams 实例化一个params对象
   let params=new URLSearchParams();
   //3.使用params对象的append方法添加数据
   params.append('a',1);
   params.append('b',2);
   new Vue({
       el:'#app',
       data:{
       },
       methods:{
        axiosPost(){
        //post方法
        axios({
            url: 'http://127.0.0.1:8080/1901/post.php',
            method: 'post',
            // params: {
            //  a: 1,
            //  b: 2
            // }
            data:params
            //使用设置的数据
          })
          .then(res => {
            console.log( res.data )
          })
          .catch( error => {
            if( error ){
              throw error
            }
          })
      
        }
       },

   })
</script>

因为我的php里post写的是a-b,所以结果应该是-1

看,世界如此美妙

axios总结:

  1. get方法和post方法是不同的
  2. post请求有效分3步

二、fetch

fetch是Vue.js自带的一种方法

上面讲过了axios的get和post,其实fetch的get和post方法和它差不多,并且,fetch的post方法也是有着同样的坑的

和axios一样返回的都是promise对象

1.fetch的get方法

fetch的get()方法同axios的get方法不同的是,fetch需要两个.then来处理

<body>
    <div id="app">
        <button @click="get">get</button>
    </div>
    
</body>
<script>
   new Vue({
       el:'#app',
       data:{

       },
       methods:{
           get(){
            console.log(fetch('http://127.0.0.1:8080/1901/get.php',{
            method: 'get'
          })) 
           }
       }
   })
</script>

这串代码用来验证输出类型的

fetch.get

输出了一个promise对象,验证了上面的猜想

那么我们接着写下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="get">get</button>
    </div>   
</body>
<script>
   new Vue({
       el:'#app',
       data:{
       },
       methods:{
           get(){
            fetch('http://ajax.root181.com/get.php?a=1&b=2')//这里深入一点可以用拼接字符串操作拼接参数
            .then(res=> {
              return res.text() // 数据格式化 res.json()          res.blob(),这里一定要return一下,否则,下面的then获取不到数据
            })        
            .then(data => {
              console.log( data )
            })
            .catch(error => {
              if( error ){
                throw error
              }
            })
           }
       }
   })
</script>
</html>

要点:

  1. 两个then
  2. 第一个then需要return返回
  3. 第一个then里做的是数据格式化

2.fetch的post方法

<body>
    <div id="app">
        <button @click="post">post</button>
    </div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{

       },
       methods:{
           post(){
              fetch('http://127.0.0.1:8080/1901/post.php',{
                  method:'post',
                  headers: new Headers({
                  'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交(必须的)
                  }),
                  body: new URLSearchParams([['a',1],['b',2]]).toString()//数据传递
              }).then(res=>res.text())
                .then(data=>console.log(data))
                .catch(error=>{
                    if(error){
                        throw error
                    }
                })
           }
       }
   })
</script>

两点:

  1. headers
  2. body: new URLSearchParams([[“a”, 1],[“b”, 2]]).toString()

axios和fetch总结:

  • axios 封装的第三方库
  • fetch 原生

相同点:都是 Promise

注意:axios fetch post方法都是有坑的 , 一定要注意

解决方法:

  1. 设置请求头
  2. 通过 new URLSearchParams() 来进行数据传参

赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js进阶之路(axios、fetch)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    b2st medlemmer dating richmond va dating gratis ikke betalende dating sites relationer og dating magazine bedste dating site ontario canada https://bokahotell.nu/ar-ar-dating.html usa dating chat room

    Abermotwah7个月前 (03-23)回复

觉得文章有用就打赏一下文章作者

微信扫一扫打赏