【axios学习笔记】axios起步

【axios学习笔记】axios起步

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

🌟愿你在未来的日子，保持热爱，奔赴山海！

一、axios是什么？

Axios是一个基于promise网络请求库，作用于node.js和浏览器

。它是 [isomorphic] 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

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

安装

使用npm: npm install axios

二、axios的基本用法

2.1 axios发送请求

• 可以向 axios 传递相关配置来创建请求 —axios(config)

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    name: 'zhang',
    password: 12346
  }
});

• axios(url[, config])

// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');

支持多种请求方式:

• axios(config)
• axios.request(config)
  • 等同于发送axios(config)
• axios.get(url[, config])
  • 发送get请求
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

2.2 请求配置

url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

• 请求的服务器 URL

  • url:'/user'

• 创建请求时使用的方法

  • method:'get'

• 请根数据

  • 便于为 axios 实例的方法传递相对 URL
  • baseURL:''

• 请求前的数据处理

  • 允许在向服务器发送前，修改请求数据
  • 它只能用于 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
  • 可以修改请求头。
  • transformRequset:[function(data{})]

• 请求后的数据处理

  • 在传递给 then/catch 前，允许修改响应数据
  • transformResponse:[function(data){}]

• 自定义的请求头

  • headers:{'x-Requseted-With':'XMLHttpRequest'}

• URL查询对象

  • params 是与请求一起发送的 URL 参数
  • 必须是一个简单对象或 URLSearchParams 对象
  • params:{}

• 查询对象序列化函数

  • paramsSerializer:function(params){}

• request body

  • 作为请求体被发送的数据
  • 仅适用 ‘PUT’, ‘POST’, 'DELETE 和 ‘PATCH’ 请求方法
  • data:{}

• 超时设置

  • 如果请求时间超过 timeout 的值，则请求会被中断
  • timeout:10000

2.3 axios实例

为什么要创建Axios实例？

• 当我们从axios模块中导入对象时，使用的实例是默认的实例
• 当给该实例设置一些默认配置时，这些配置就被固定下来了
• 但是后续开发中，某些配置可能会不太一样，比如某些请求需要使用特定的baseURL或者timeout等
• 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息
• axios.create([config])

// 使用自定义配置新建一个实例
const instance = axios.create({
    baseURL:' ',
    timeout:1000,
    headers: {}
})

2.4 默认配置

您可以指定默认配置，它将作用于每个请求。

全局 axios 默认值

axios.defaults.baseURL = ' ';

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: ' '
});

// 创建实例后修改默认值
instance.defaults.timeout = 1000

三、拦截器 interceptors

拦截器是指当发送请求或者得到响应被then或catch处理之前对它们进行拦截，拦截后可对数据做一些处理

• 比如给请求数据添加头部信息；
• 对响应数据进行序列化，然后再传给浏览器；
• 这些都可以在拦截器中进行

• axios.interceptors.request.use(请求成功拦截, 请求失败拦截)
• axios.interceptors.response.use(响应成功拦截, 响应失败拦截)

// 对实例配置拦截器
// 添加一个请求拦截器
axios.interceptors.request.use((config) => {
    // 在发送请求之前做一些事
    // 1.开始loading的动画
    // 2.对原来的配置进行一些修改
    // 2.1 header
    // 2.2 认证登录：token/cookie
    // 2.3 请求参数进行某些转化
    console.log("请求成功的拦截");
    return config

}, (err) => {
    //对请求错误时做一些事
    console.log("请求失败的拦截");
    return err
});

// 添加一个响应拦截器
axios.interceptors.response.use((response) => {
    //对返回的数据做一些处理
    // 1.结束loading的动画
    // 2.对数据进行转化,再返回数据
    return response
}, (err) => {
    //对返回的错误做一些处理
    return err
})