axios 入门使用

Posted 2022-01-14 安果移不动

官方文档：axios中文文档|axios中文网 | axios

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

特性

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

浏览器支持

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	8+ ✔

 执行 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) 
    // 两个请求现在都执行完成
  ));

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.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 这些属性都不必在配置中指定。

并发
处理并发请求的助手函数

axios.all(iterable)
axios.spread(callback)
创建实例
可以使用自定义配置新建一个 axios 实例

axios.create([config])

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