b/s(浏览器与服务器)通信-axios篇


介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

项目地址

https://github.com/axios/axios

中文文档

http://axios-js.com/zh-cn/docs/

特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

安装

npm

npm install axios

yarn

npm add axios

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

举栗子

执行get请求

    // 向具有指定ID的用户发出请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    // 也可以通过 params 对象传递参数
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

执行post请求

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

执行多个请求

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    //两个请求现已完成
  }));

在vue中简单使用

get

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
        {{info}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                axios
                    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(response => (this.info = response))

        .catch(function (error) {
            console.log(error);
          });
            }
        })
    </script>

post

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

在react中使用

在要使用的组件中

//当组件输出到 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
      })
    })
  }

setState 中的State要在constructor中声明


this.state={
      users:[],
      isLoaded:false
    }

认清形势,放弃幻想


文章作者: Lee Sun
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Lee Sun !
评论
 上一篇
sqlmap简单使用 sqlmap简单使用
sqlmapPOST登录框注入: 抓包,然后保存抓取到的内容。例如:保存为post.txt,然后把它放至某个目录下 sqlmap.py
2020-02-26
下一篇 
1+x 初级理论考试样题 2019 1+x 初级理论考试样题 2019
前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程。前端开发通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。Web 前端工程师,他是伴随着 web 兴起而细分进去的行业。
2019-12-19
  目录