axios的使用与封装

最新推荐文章于 2024-09-12 11:41:57 发布

a10534126

最新推荐文章于 2024-09-12 11:41:57 发布

阅读量904

点赞数

分类专栏：前端 html 面试文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/a10534126/article/details/123154557

版权

本文介绍了axios，一个基于promise的HTTP库，适用于浏览器和node.js。内容包括axios的特性、浏览器支持情况、安装方法（npm和cdn）、基本用法、请求方法别名、实例创建、配置选项、响应结构、配置默认值设定、拦截器的使用，以及如何封装和调用axios。还提供了一份前端开发的学习大纲和资源。

摘要由CSDN通过智能技术生成

什么是axios

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

特性

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

浏览器支持

绝大部分现代浏览器以及ie8+

axios使用

安装

使用npm

npm install axios

使用cdn

案例

axios(config)

// 发送 POST 请求
axios({
	method: 'post',
	url: '/user/12345',
	data: {
		firstName: 'Fred',
		lastName: 'Flintstone'
	}
}).then(res => {
	console.log(res)
})

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