vue数据请求

  • 请求方案一：axios 第三方模块,可以安装或引入cdn或下载使用。不符合模块化开发思想。返回值经过了封装，安全性较高。
    写法方式：axios.get() //get请求
    axios.post() //post请求
    axios(options) //get，post请求都行。
    axios.default.baseURL=‘http://localhost:3000’;//baseURL指定的就是后端请求接口地址
  1. 模拟数据请求
    注意点：进行模拟数据时要和后端定义的字段必须统一。
getMOckData(){
   axios({
    url:`${baseURL}/user` , //接口路径
    methods:'get'  //默认是get，可以修改  
 }).then(res=> console.log(res))
   .catch(err=> console.log(err))
}
  1. 后端接口（1). get()方式请求 ：axios.get(url,options)
```jsaxios({
 url:${baseURL}/user,
 params:{
 //传给后端的数据
 },
 }).then(res=> console.log(res))
 .catch(err=>console.log(err))
 ```

(2). post() 方式请求:传递数据格式为 application/json

axios({
  url:`${baseURL}/user`,
  method:'post',
  data:{
      //传给后端的数据
  }
}).then(res=> console.log(res))
  .catch(err=>console.log(err))

(3) . post() 方式请求:传递数据格式为 表单 application/x-www-form-urlencoded

const p=new URLSearchParams()  //得到 数据参数携带 对象p
p.append('username',username)  //传递给后端的数据
p.append('password',password)  //数据

axios({
  url:`${baseURL}/`，
  method:'post',
  data:p  //发送给后端的数据
}).then(res=>console.log(res))
  .catch(err=>console.log(err))

(4). put()方式请求：底层原理是get请求

axios({
  url:`${baseURL}/`,
  method:'put',
  params:{
     //发送给后端的数据
   }
}).then(res=> console.log(res))
  .catch(err=> console.log(err))

(5) . delete() 方式请求：底层原理是get请求

axios({
  url:`${baseURL}/`,
  method:'delete',
  params:{
     //发送给后端的数据
   }
}).then(res=> console.log(res))
  .catch(err=> console.log(err))

总结：页面传递数据给后端的方式不同，get,put,delete用 params：{ 数据 }。 post发送json数据用data:{ 数据 }。post发送表单数据需要定义数据参数携带对象p，data:p。

  • 请求方案二：fetch
  1. 特点：原生js提供，可以用ajax封装，使用简易。 符合模块化开发思想。返回值没有经过封装，安全性较低。
  2. 模拟数据请求
fetch(`${baseURL}/user`)
   .then(data=>data.json())  //数据格式化 json()  ,text() ,blob()二进制
   .then(res=>console.log(res))  //返回的数据
   .catch(err=>console.log(err))
  1. get()请求，发送的数据放在url中拼接
fetch(`${dataURL}/serch?name=zhangsan&password=123456`,{
    method:'get'
}).then(data=>data.json())  //数据格式化 json()  ,text() ,blob()二进制
   .then(res=>console.log(res))  //返回的数据
   .catch(err=>console.log(err))
  1. post请求，发送数据为表单格式
fetch(`${baseURL}/user`,{
  method:'post',
  header:new Headers({
     'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
  }),
  body:new URLSearchParams([['username','张三'],['password',123456]]).toString()   //发送给后端的数据
    
}).then(data=>data.json())  //数据格式化 json()  ,text() ,blob()二进制
   .then(res=>console.log(res))  //返回的数据
   .catch(err=>console.log(err))
  1. post请求，发送数据为json格式
fetch(`${baseURL}/user`,{
  method:'post', //or 'put'/delete请求会请求2次
  headers:new Headers({
      'Content-Type': 'application/json'   //指定json数据格式提交
  }),
  body:JSON.stringify({
     username:'张三',
     password:123456   //发送给后端的数据
  })
}).then(data=>data.json())  //数据格式化 json()  ,text() ,blob()二进制
   .then(res=>console.log(res))  //返回的数据
   .catch(err=>console.log(err))

总结：get请求发送的数据拼接到url中。post请求要通过设置请求头来指定提交方式，表单提交要new URLSearchParams([],[]).toString() 发送数据到后端 , json格式提交用 JSON.stringify({}) 发送数据， 转为字符串。