526互联

Vue07-Axios

发布时间 2023-05-31 13:49:28作者: 子不语2015831

Axios

axios是一个网络请求相关的库。

axios: ajax i/o system

使用axios编写的网络请求代码，可以运行在浏览器端，也可以在Node环境中运行。

01. 支持的请求方式

  • axios(config)

  • axios.request(config)

  • axios.get(url[, config])

  • axios.delete(url[, config])

  • axios.head(url[, config])

  • axios.post(url[, data[, config]])

  • axios.put(url[, data[, config]])

  • axios.patch(url[, data[, config]])

使用axios.all, 可以放入多个请求的数组。

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

02. 配置选项

  • 请求地址
    • url: '/user'
  • 请求类型
    • method: 'get'
  • 请求根路径
  • 自定义请求头
    • headers:{'x-Requested-With':'XMLHttpRequest'},
  • 携带参数
    • params:
  • request body
    • data:
  • 超时设置
    • timeout: 1000
  • 请求前数据处理
    • transformRequest:[function(data){}],
  • 请求后数据处理
    • transformResponse: [function(data){}],
  • 查询对象序列化函数
    • paramsSerializer: function(params){}

03. 示例

基本使用

import axios from 'axios'

// 1.发送request请求(默认为get请求)
axios.request({
    url: "http://123.207.32.32:8000/home/multidata",
    method: "get"
}).then(res => {
    console.log("res:", res.data)
})

// 2.发送get请求
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
    console.log("res:", res.data.lrc)
})

// 3.发送get请求，携带参数
axios.get("http://123.207.32.32:9001/lyric", {
    params: {
        id: 500665346
    }
}).then(res => {
    console.log("res:", res.data.lrc)
})


// 4.发送post请求，直接传入参数
axios.post("http://123.207.32.32:1888/02_param/postjson", {
    name: "coderwhy",
    password: 123456
}).then(res => {
    console.log("res", res.data)
})

// 5.发送post请求，定义data
axios.post("http://123.207.32.32:1888/02_param/postjson", {
    data: {
        name: "coderwhy",
        password: 123456
    }
}).then(res => {
    console.log("res", res.data)
})

设置BaseURL

import axios from 'axios'

// 1.baseURL
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}

// get: /home/multidata
axios.get("/home/multidata").then(res => {
    console.log("res:", res.data)
})

一次性多个请求:

import axios from 'axios'

// 2.axios发送多个请求
// Promise.all
axios.all([
    axios.get("/home/multidata"),
    axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
    console.log("res:", res)
})

04. axios实例

导入语句 import axios from 'axios' ，导入的是一个实例。

可以直接使用这个实例发送网络请求，一般的开发、测试使用这个实例即可。

同时，这个实例有一个create的方法，可以创建新实例。

大项目的开发中，为了便于管理，一般都会针对场景创建对应的axios实例。

import axios from 'axios'

// axios默认库提供给我们的实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")

// 创建其他的实例发送网络请求
const instance1 = axios.create({
    baseURL: "http://123.207.32.32:9001",
    timeout: 6000,
    headers: {}
})

instance1.get("/lyric", {
    params: {
        id: 500665346
    }
}).then(res => {
    console.log("res:", res.data)
})


const instance2 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 10000,
    headers: {}
})

05. 拦截器

import axios from 'axios'

// 对实例配置拦截器
axios.interceptors.request.use((config) => {
    console.log("请求成功的拦截")
    // 场景1.开始loading的动画

    // 场景2.对原来的配置进行一些修改
    // 2.1. 修改header
    // 2.2. 添加认证登录: token/cookie
    // 2.3. 请求参数进行某些转化

    return config
}, (err) => {
    console.log("请求失败的拦截")
    return err
})

axios.interceptors.response.use((res) => {
    console.log("响应成功的拦截")

    // 场景1.结束loading的动画

    // 场景2.对数据进行转化, 再返回数据
    return res.data
}, (err) => {
    console.log("响应失败的拦截:", err)
    return err
})

axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {
    console.log("res:", res)
}).catch(err => {
    console.log("err:", err)
})

06. 封装实例

对于像网络请求这种库，为了方便管理，也为了避免出现这个库一旦官方不更新、不维护，整个项目就得重新修改的情况，

我们往往会对这个库在进行封装。

import axios from 'axios'

class HYRequest {
    constructor(baseURL, timeout=10000) {
        this.instance = axios.create({
            baseURL,
            timeout
        })
    }

    request(config) {
        return new Promise((resolve, reject) => {
            this.instance.request(config).then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err)
            })
        })
    }

    get(config) {
        return this.request({ ...config, method: "get" })
    }

    post(config) {
        return this.request({ ...config, method: "post" })
    }
}

export default new HYRequest("http://123.207.32.32:9001")