Axios基础入门使用——笔记

简介

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

特点

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

安装

使用npm

npm install axios

使用cdn

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

使用

Get请求

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

// 可选地，上面的请求可以这样做
axios.get('/user', {
    // 携带的参数较多，以JSON格式传递
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
  // get请求后，成功后的执行区域
    console.log(response);
  })
  .catch(function (error) {
  // get请求后，失败执行区域
    console.log(error);
  })

Post请求

axios.post('/user', {
    firstName: 'Fred',    // post携带的参数
    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) {
    // 两个请求现在都执行完成
  }));

axios API

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

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
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 实例

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例方法

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