网络请求库-axios学习笔记1.认识axios 1. 功能特点: 在浏览器中发送 XMLHttpRequests 请求

1.认识axios

1. 功能特点:

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

补充: axios名称的由来? 个人理解

没有具体的翻译.
axios: ajax i/o system.

安装axios

npm install axios

2.axios请求方式

1. 支持多种请求方式:

axios(config) //直接拿到axiso,将他当成一个函数，传入配置，发送网络请求
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]])

2. 有时候, 我们可能需求同时发送两个请求

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

3. config常见的配置选项

请求地址: url: '/user',
请求类型: method: 'get',
请根路径: baseURL: 'www.mt.com/api',
请求前的数据处理: transformRequest:[function(data){}],//转化请求
请求后的数据处理: transformResponse: [function(data){}], //请求响应做一个转化
自定义的请求头: headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象: params:{ id: 12 },
查询对象序列化函数: paramsSerializer: function(params){ }
request body :data: { key: 'aa'},
超时设置:timeout: 1000,

3.基本使用

1. 发送request请求

// 1.发送request请求
axios.request({
    url: 'http://123.207.32.32:8000/home/multidata',
    // 如果没有写请求方式，默认是get请求
    method: "get",

    // request函数返回的是promise，一旦发送请求，内部调用promise的resolve，返回结果
}).then(res => {
    console.log("res", res.data);
})

2.发送get请求

第一个参数是url,第二个是配置

// 2.发送get请求(第一个参数是url,第二个是配置)
// http://123.207.32.32:9000/lyric?id=500665346
// 写法一
axios.get('http://123.207.32.32:9000/lyric?id=500665346').then(res => {
    console.log(res.data.lrc);
})

// 写法二:用的多
axios.get('http://123.207.32.32:9000/lyric', {
    params: {
        id: 500665346,
    },
}).then(res => {
console.log("res",res.data);
})

3. 发送post请求

发送post请求,post请求的参数不能拼接到url后面
发送post请求(第一个参数是url,第二个参数是data,第三个参数是config)

注：第二个参数可以当成data，也可以当成config来写

// 发送post请求,post请求的参数不能拼接到url后面

// 发送post求(第一个参数是url,第二个参数是data,第三个参数是config)

// 写法一
axios.post('http://123.207.32.32:1888/02_param/postjson', {
    name: "aaaa",
    password: 123456,
}).then(res => {
    console.log("post的res",res.data);
})

// 写法二
axios.post('http://123.207.32.32:1888/02_param/postjson', {
    data: {
        name: "aaaa",
        password: 123456,
    }
}).then(res => {
    console.log("post的res", res.data);
})

4.配置公共的基础配置

1. baseURL

2. 其他配置

// 1. baseURL
const baseURL = 'http://123.207.32.32:8000'
//给axios实例，配置公共的基础配置
axios.defaults.baseURL = baseURL;//// 默认配置baseURL
axios.defaults.timeout=10000;
axios.defaults.headers={}

3. 一次性发送多个请求

// 1. baseURL
const baseURL = 'http://123.207.32.32:8000'
// //给axios实例，配置公共的基础配置
axios.defaults.baseURL = baseURL;
// 2.axios发送多个请求
axios.all([
    axios.get("/home/multidata "),
    axios.get('http://123.207.32.32:9000/lyric?id=500665346')
]).then(res=>{//只有等两个请求都有结果才会回调then
    console.log("两个请求",res);
})

5.axios的创建实例

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

1.默认的实例对象

// axiso库默认提供给我们的实例对象
axios.defaults.baseURL=""//这样写默认的axios都用的是一个配置

axios.get('http://123.207.32.32:9000/lyric?id=500665346')

2.创建其他的实例，发送网络请求

// 对我们的实例，配置拦截器
// 请求拦截，传入两个回调函数。（"请求成功的回调拦截", "请求失败的回调拦截"）
axios.interceptors.request.use((config) => {//成功时，传入config配置信息
    console.log("请求成功的拦截");
    config.headers['token'] = "token信息"
    // 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("响应失败的拦截");
    return err;
})

axios.get('http://123.207.32.32:9000/lyric?id=500665346').then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

6.axios请求库封装（简洁版）

import axios from 'axios'

// 封装一个类
class fyRequest {
    constructor(baseURL, timeout = 1000) {
        // 创建一个新的实例
        this.instance = axios.create({
            baseURL,
            timeout
        })
    }
    request(config) {   //封装request方法,传进config
        return new Promise((resolve, reject) => {
            this.instance.request(config).then(res => {
                // console.log("fyRequest获取的res:", res);
                resolve(res.data)
            }).catch(err => {
                reject(err)
            })
        })
    }

    // 封装get实例方法，传进config

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

// 可以创建多个实例
// const hyRequest1 = new fyRequest("http://123.207.32.32:9001");
// const hyRequest2 = new fyRequest("http://123.207.32.32:9002");

//new一个实例，再导出出去。相当于创建了一个对应的fyRequest对象，在用里面的对象方法
export default new fyRequest("http://123.207.32.32:9000");

使用如下：