axios学习

官方文档地址：https://github.com/axios/axios

axios 是一个基于 Promise 的HTTP库，可以用在浏览器和 node.js 中

特性：

• 从浏览器发起 XMLHttpRequests 请求

• 从 node.js 发起 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换为 JSON 数据

• 客户端支持防御 XSRF

补充Promise：

Promise 是 es6中新增的异步事件处理方式，基本用法如下：

let myFirstPromise = new Promise((resolve, reject) => {
  // 当异步事件处理成功后自动调用 resolve(...)方法，如果失败的话则调用 reject(...)
  // 在这个例子中，我们使用setTimeout(...) 定时器来模拟异步事件
  setTimeout(function(){
    resolve("Success!"); // 此时，所有代码运行完毕
  }, 250);
});

myFirstPromise.then((successMessage) => {
    //successMessage 就是上面的resolve(...)方法中所传入的参数
  console.log("Yay! " + successMessage);
});


// Yay! Success!

Promise对象是一个构造函数，它接收一个函数作为参数，该函数的两个参数分别是 resolve（字面意思：解决） 和 reject （字面意思：拒绝），它们是两个函数，由 js 引擎提供，不用自己部署。

resolve 函数的作用是，将 Promise 对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。

reject 函数的作用是，将 Promise 对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

上例中，myFirstPromise 是 Promise 对象创建的一个实例，Promise 实例生成后，可以用 then 方法分别指定 resolve 状态 和 reject 状态的回调函数，reject 函数是可选的，不一定要提供

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

上面代码中，getJSON 方法返回一个 Promise 对象，如果该对象状态变为 resolved，则会调用 then 方法指定的回调函数；如果异步操作抛出异常，状态就会变为 rejected，同时调用 catch 方法指定的回调函数，处理这个错误。另外，then 方法指定的回调函数，如果在运行中抛出错误，也会被 catch 方法捕获

安装：

// 命令行输入
npm install axios

//引入 axios
import axios from 'axios'

官网提供的示例：

执行 GET 请求

// 为给定 ID 的 user 发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这么做
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) {
    // 两个请求都已完成
  }));

现在跟着官网的例子来操作下：

Demo 1：成功的发起一个 GET 请求

<button type="button" class="btn btn-primary" @click="get">get</button>

import axios from 'axios';
    export default{
        methods: {
            get () {
                axios.get('../../../static/data/sidenav.json').then(response=>console.log(response))
                                       .catch(error=>console.log(error))
            }
        }
    }

运行结果：

Demo 2：发起 GET 请求失败，依照上例，访问一个不存在的 hello.txt 文件

import axios from 'axios';
    export default{
        methods: {
            get () {
                axios.get('./hello.txt').then(response=>console.log(response))
                                       .catch(error=>console.log('错误消息：'+error))
            }
        }
    }

运行结果：

axios API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送一个 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// 从远程图片获取 GET 请求
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

// 发送一个 GET 请求（默认方法）
axios('/user/12345');

请求方法的别名：

为方便起见，所有被支持的请求方法都提供了别名

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]])

注意：在使用别名方法时，url、method、data 这些属性都不必在配置中指定