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);
      });



  • 相关阅读:
    SEO网站优化10大要点
    三维翻动效果的jquery特效代码
    多款国外虚拟主机简单比较
    jquery同步调用ajax
    3D虚拟技术
    最简单jquery.ajax+php例子(对话框显示文本框输入内容),以小见大(初学手记)
    正则表达式学习博客
    关于XHTML头部声明,什么是DOCTYPE?
    Iframe高度自适应(兼容IE/Firefox、同域/跨域)
    3D立体产业链的发展现状和趋势
  • 原文地址:https://www.cnblogs.com/zoeeying/p/10783031.html
Copyright © 2011-2022 走看看