axios的安装与使用

1. 安装axios的命令为npm install axios

2. axios的基本使用

   import axios from 'axios'
   
   axios.request({
       url: 'http://',
       method: 'get'
   }).then(res => {
       console.log(res)
   })

3. 发送get请求

   import axios from 'axios'
   
   axios.get('url地址', {
       params: {
           id: 123
       }
   })
   
   // 另外一种携带参数的方式
   axios.get('url地址?id=123')

4. 发起post请求

   import axios from 'axios'
   
   axios.post('url地址', {
       // 参数
       username: '123',
       password: '123'
   })
   
   // 另一种写法
   axios.post('url地址', {
       // 参数
       data: {
           username: '123',
           password: '123'
       }
   })

axios设置请求根路径

使用axios.defaults.baseURL可以设置请求根路径。

import axios from 'axios'

// 设置请求根路径为 http://127.0.0.1:3000
axios.defaults.baseURL = 'http://127.0.0.1:3000'

// 设置默认超时时间
axios.defaults.timeout = 6000

// 设置默认请求头
axios.defaults.headers = {}

axios一次性发送多个请求

使用axios.all()方法一次发送多个请求，参数为数组。返回一个数组，里面是请求的结果的数组。本质是Promise.all()。

import axios from 'axios'

axios.all([
    axios.get('xxx'),
    axios.post('aaa', {username: 'aaa'})
])

axios新建实例

使用create()方法创建一个新的axios实例，可以对新的实例进行配置。

import axios from 'axios'

const instance1 = axios.create({
    baseURL: 'http://xxx',
    timeout: 5000,
    header: {}
})

export default instance1

axios请求拦截器

发送请求前可以进行一些操作。axios.interceptors.request.use(成功的回调, 失败的回调)

其他用途： 显示loding动画

主要用途：认证登录、数据转化

import axios from 'axios'

axios.interceptors.request.use((config)=> {
    config.header['token'] = 'bearer xxx' // 请求头增加token
    return config // 返回 config
})

axios响应拦截器

发送请求响应时做出一些操作。axios.interceptors.response.use(成功的回调, 失败的回调)

其他用途： 关闭loding动画

主要用途：对获取的数据进行转化

import axios from 'axios'

axios.interceptors.response.use((res) => {
    return res.data  // 转换数据 方便使用
})