【axios学习笔记】axios起步

【axios学习笔记】axios起步

文章目录

  • 【axios学习笔记】axios起步
  • 写在前面
  • 一、axios是什么?
  • 二、axios的基本用法
    • 2.1 axios发送请求
    • 2.2 请求配置
    • 2.3 axios实例
    • 2.4 默认配置
  • 三、拦截器 interceptors

写在前面

这里是前端程序员小张!

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

愿你在未来的日子,保持热爱,奔赴山海!

一、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
})

你可能感兴趣的:(Axios,学习,javascript,前端)