vue之三种请求资源方式

千峰逆战班，千峰斯坦僧接班人之一打卡第二十七天。

//今天回顾一下vue的三种请求资源方式(vue-resource.fetch,axios),并且学习一下第三种axios方式的封装

一、vue-resource请求

//从vue的2.0开始，作者表示vue-resource不再维护了(所以这个会使用即可)

• get请求

      

          
{{book.title}}
      
     发起http请求
 
      
 

//使用vue-resource需要引入这个插件

    

---

• jsonp请求
  //因为get和jsonp只是在请求时多了一个params参数对象,所以就不做过多cv,使用该方法仅需覆盖掉get方法即可

jsonp(){
                    this.$http.jsonp("http://suggest.taobao.com/sug?code=utf-8",{
                        params:{
                            q:this.good
                        }
                    }).then(res=>{
                        console.log(res)
                        this.result = res.data.result
                        this.good = ""
                    })
                }

二、fetch方法

//因为该方法在实际兼容中有很多问题,所以会使用即可

    

        
fetch请求
    

    
    

三、axios方法

//该方法是ajax和promise的合体,是实际中最常用的请求方式,所以具体来学习一下使用和封装

1) axios使用

• 1.1 axios之get请求

//有两种方式请求get 第一种方法是url拼接查询内容  第二种方法是传入params参数对象
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 1.2 axios之post请求

 axios.post('/user', {
    firstName: 'firstName',
    lastName: 'lastName'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2) axios封装

//这里是我自己test时写的后端接口,只是为了测试用,并未做过多逻辑验证

• 定义后端接口

const express = require("express");
let body = require("body-parser");

const app = express();


app.use(express.static('./pages'));
app.use(body.json());
app.use(body.urlencoded({ extended: false }));

app.get('/user',(req,res)=>{
    res.send({a:10,b:20})
})

app.post('/user',(req,res)=>{
    res.send({a:20,b:40})
})

app.listen(9802);

• 前端发送请求封装

四、总结

axios方式是现在主流请求方法,要会用会封装

好好学习，天天向上。中国加油，武汉加油，千峰加油！