zoukankan      html  css  js  c++  java
  • 学习axios

    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
    Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,想必让axios进入了很多人的目光中。
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
    1.从浏览器中创建 XMLHttpRequest
    2.支持 Promise API
    3.客户端支持防止CSRF
    4.提供了一些并发请求的接口(重要,方便了很多的操作)
    5.从 node.js 创建 http 请求
    6.拦截请求和响应
    7.转换请求和响应数据
    8.取消请求
    9.自动转换JSON数据

    防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
     
    Promise:Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
    new Promise( function(resolve, reject) {...} /* executor */ );
     
     
     
    //当组件输出到 DOM 后会执行 componentDidMount()
    componentDidMount(){
        const _this=this;    //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
        axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
        .then(function (response) {
          _this.setState({
            users:response.data,
            isLoaded:true
          });
        })
        .catch(function (error) {
          console.log(error);
          _this.setState({
            isLoaded:false,
            error:error
          })
        })
      }
    //List.js
    render() {
          if(!this.state.isLoaded){
            return <div>Loading</div>
          }else{
          return (
            <table className="table table-bordered">
              <thead>
                <tr>
                  <th className="text-center">ID</th>
                  <th className="text-center">姓名</th>
                  <th className="text-center">年龄</th>
                  <th className="text-center">性别</th>
                </tr>
              </thead>
            <tbody>
               <TrData users={this.state.users}/>
            </tbody>
            </table>
          )  
        }
      }
    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    //发送 GET 请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      })
      .catch(function (error) {
        console.log(error);
      });



  • 相关阅读:
    WordPress后台添加友情链接管理功能
    WordPress评论时一键填入昵称、邮箱和网址
    七牛云存储更新缓存图片的方法
    WordPress文章中插入qq表情
    WordPress文章页添加展开/收缩功能
    WordPress添加显示和隐藏侧边栏按钮开关
    Defraggler磁盘碎片整理工具,让你的电脑读写速度更快
    如何彻底关闭系统还原功能和删除系统还原点
    WordPress博客彻底关闭图片缩略图功能的方法
    WP Super Cache+七牛云配置CDN加速,让你的网站秒开
  • 原文地址:https://www.cnblogs.com/zoeeying/p/10783031.html
Copyright © 2011-2022 走看看