使用框架后的数据请求方式

数据请求

框架后基本不会再用原生的ajax
ajax不符合模块化思想

前端如何模拟数据

1. mock.js
   • 安装：npm i mockjs -S
   • 使用：去官网找需要的模板
2. easymock
   • 用法去npmjs查，用法相似
3. jsonserver
   • 同上
4. 前端模拟数据要根据后端给的接口来做模拟数据，根据返回值来做

两个新的数据请求方案

1. 第三方模块：axios

   • 支持npm、CDN

   安装：npm install axios -S

   • 基于promise的http请求
   • 特征：
     • 从浏览器中创建 XMLHttpRequests
     • 从 node.js 创建 http 请求
     • 支持 Promise API
     • 拦截请求和响应
     • 转换请求数据和响应数据
     • 取消请求
     • 自动转换 JSON 数据
     • 客户端支持防御 XSRF
     • axios的返回值是一个封装对象，data属性是返回结果
     • 设置请求地址的baseURL：

     //示例
     axios.defaults.baseURL='http://localhost:3000';
     

   • get 请求

       //get请求
       axios({
           url:'',
           method:'get',
           params:{
               //传给后端的参数
   
           }
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
       
       //法二
       axios.get({
           url:'',
           params:{
               //传给后端的参数
           }
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
   
   
   

   • post请求

       //post请求   json提交
       axios({
           url:'',
           method:'post',
           data:{
               //传递的数据
           }
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
       
   
       //post请求   formdata (querystring)表单提交
       //示例：传usernam和password给后端
       axios({
           const p =new URLSearchParams()
           const {username,password}=this
           p.append('username',username)
           p.append('password',password)//得到数据参数携带对象
           url:'',
           method:'post',
           data:p
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
   
       //还可以使用axios.post()方法  传参数和属性同上
   
   

   • put请求

       //put请求  
       //put请求底层是get请求
       axios({
           url:'',
           method:'put',
           params:{
               //传给后端的参数
           }
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
   
   

   • delete请求

       //delete请求
       //delete请求底层也是get请求
       axios({
           url:'',
           method:'delete',
           params:{
               //传给后端的参数
           }
       }).then(res=>console.log(res))
         .catch(err=>console.log(err))
   
   

2. 原生js提供：fetch

   • 由原生js提供 ajax的封装版本

   • 复合模块化思想

   • 用的也是promise

   • 在浏览器呈现fetch字样

   • 返回的数据没有经过包装处理

   • get请求

       //传的数据要跟在url后面
       fetch('url?data',{
           method:'get'
       })
       .then(data=>data.json())
       .then(res=>console.log(res))
       .catch(err=>console.log(err))
   

   • post请求

       //表单提交发送
       fetch('url',{
           method:'post',
           headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
           }),
           body: new URLSearchParams([["username", 'zhangsan'],["password", 123]]).toString() // 这里是请求对象
       })
       .then(data=>data.json())
       .then(res=>console.log(res))
       .catch(err=>console.log(err))
   
   
       //json数据提交
       fetch(`${ baseURL }/users`, {
         method: 'POST', // or 'PUT'
         body: JSON.stringify({
           username: 'zhangsan',
           password: 123
         }), 
         headers: new Headers({
           'Content-Type': 'application/json'
         })
       })
       .then(data=>data.json())
       .then(res=>console.log(res))
       .catch(err=>console.log(err))