前后端数据交互(五)——什么是 axios？

呆呆

发布于 2021-11-30 14:39:46

9000

发布于 2021-11-30 14:39:46

文章被收录于专栏：centosDai

一、什么是 axios ?

axios是基于 Promise 的 ajax 封装库，也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求，是一个轻量级的库，使用时可直接引入。

二、axios 的特点

异步的 ajax 请求库。
在浏览器端和 node 端都可以使用。
支持 Promise API。
支持请求和响应拦截。
响应数据自动转换 JSON 数据。
支持请求取消。
可以批量发送多个请求。
客户端支持安全保护，免受 XSRF 攻击。

三、axios API

3.1、安装

/* npm 安装 */
npm install axios --save

/* bower 安装 */
bower install axios

/* 使用 yarn */
yarn add axios

/* cdn 引入 */
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

注：如果简单静态页面使用，建议cdn方式引入。

3.2、axios API

向 axios 传输相关配置参数，创建请求。如：axios(config)

/* 如发送一个post请求的配置参数如下 */
axios({
 method: 'post', //请求方法
 url: '/user/12345', //访问接口
 data: { //传输数据
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
/* 如发送一个get请求的配置参数如下 */
axios({
  method: 'get',
  url: 'http://localhost:80/one',//请求接口
  responseType: 'stream'//响应形式
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('save.jpg')) //保存图片
  });

3.3、axios 请求方法

上边axios API 每发起一个请求，都需要设置它的请求方法和响应头超时等信息，使用起来比较繁琐，为了方便，axios 为所有支持的请求方法提供了别名，可直接指定方式发起请求，其他参数可通过全局设置。如：

axios('/user/id=1');

上述 axios 直接发送请求，不设置请求方式时，默认使用 get 请求，与 ajax 和 fetch 相同。所以发送的是一个get请求，也可以使用 get 方法发送，如下实例：

axios.get( 
  '1.txt' , 
  {
   params:{id:'1'}
  }
).then(res=>{
  console.log(res);
 })
 .catch(err=>{
 console.log(err);
})

可简写成 axios(url,config)。

具体的其他方法分别为：

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

3.4、批量发送请求

网络请求中往往会有多个网络请求并发执行，有时需要统一处理它们返回结果，所以axios有并发处理。axios.all()可以并行发送多个网络请求，等待请求都返回之后，继续处理。

使用语法：

/* 第一种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(res=>{
    console.log(res) //返回的res是一个数组，res[0]是第一个请求数据 res[1]是第二个请求数据
})

/* 第二种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(
 axios.spread((res1,res2)=>{
   res1 //是第一个请求返回数据
   res2 //是第二个请求返回数据
  })
)

使用 axios.spread 能够自动分割请求返回数据。

1.5、全局默认配置

全局默认配置主要作用于每个请求。既节省敲代码的时间，想修改的时候，只需修改一个就可以全部修改掉。

常见的全局默认配置有：

axios.defaults.baseURL = "http://localhost:8080/" //配置域名
axios.defaults.timeout = 6000; //单位是毫秒，设置超时时间

/* 头设置 */
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3.6、axios 实例

// 实例化的时候配置默认参数
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

之所以使用 axios 实例化，是因为全局实例化 http 请求有全局的响应拦截，当我们某些接口无法返回状态码时，我们将无法得到 response，此时我们需要在当前 api 中重新实例化一个 axios，设置新的响应拦截码。

3.7、拦截器

拦截器分为两个，有请求拦截和响应拦截，可以统一处理某些业务。

请求拦截器：

/* 
请求拦截器
统一在发送请求之前添加token
*/
axios.interceptors.request.use(config=>{
 config.headers.token = sessionStorage.getItem("token") //添加toke
  return config
},err=>{
 console.log(err)//请求错误
})

响应拦截器

axios.interceptors.response.use(response=>{
  return response
},err=>{
 console.log(err)//响应错误
})

3.8、响应内容

基本使用中，第一个实例请求成功，打印结果 console.log(res) 。返回结果如下：

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //config是在请求的时候的一些配置信息
  config: {}
}

四、axios 常见应用

axios既可以在浏览器端使用，也可以在node.js中使用。在浏览器端发送的是XMLHttpRequest，在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网络安全