小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
axios使用笔记
  • 首页 > 前端 > JavaScript
  • 作者:小昱
  • 2017年6月26日 16:39 星期一
  • 浏览:195
  • 字号:
  • 评论:0
  • vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。

    安装

    使用npm:

    npm install axios

    使用bower:

    bower install axios

    使用cdn:

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

    使用

    import axios from 'axios'

    案例

    使用 GET 请求

    // Make a request for a user with a given ID 
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
     
    // Optionally the request above could also be done as 
    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) {
        // Both requests are now complete 
      }));

    axios API

    axios(config)

    // Send a POST request 
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    // GET request for remote image 
    axios({
      method:'get',
      url:'http://bit.ly/2mTM3nY',
      responseType:'stream'
    })
    .then(function(response) {
      response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
    });

    axios(url[, config])

    // Send a GET request (default method) 
    axios('/user/12345');

    Request method aliases

    axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.options(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])


    使用配置

    完整模式

    axios.get("http://localhost/test.json", {
      params: {
        id: 12345
      }
    }).then((res)=>{
      console.log(res);
      console.log(res.data);
    }).catch(function (error) {
      console.log(error);
    });

    配置模式

    let axiosConfig = {
      baseURL: 'http://localhost',
      timeout: 2000
    }
    let instance = axios.create(axiosConfig);
    
    instance.get("/test.json", {
      params: {
        id: 12345
      }
    }).then((res)=>{
      console.log(res);
      console.log(res.data);
    }).catch(function (error) {
      console.log(error);
    });



      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: axios使用笔记
    本文地址:http://www.xiaoyulive.top/?post=101
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号