1.基本请求接口(默认是get请求,不写method)

    axios({
        url:'http://123.456'
    }).then(res =>{
        console.log(res)
    })

2.post请求接口

    axios({
        url:'http://123.456',
        method:"post",
    }).then(res =>{
        console.log(res)
    })

3.get请求拼接参数

    axios({
        url:'http://123.456',
        // method:"post",
        params:{
            type:'lisa',
            page:1
        }
    }).then(res =>{
        console.log(res)
    })

4.axios发送并发请求

    axios.all([axios({
        url:'http://123.789',
    }),axios({
        url:'http://123.456',
        params:{
            type:'lisa',
            page:1
        }
    })]).then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
    }))

5.baseurl的使用

    axios.all([axios({
        baseURL:'http://123.789',
        url:'/home/data',
    }),axios({
        baseURL:'http://123.456',
        url:'/home/data',
        params:{
            type:'lisa',
            page:1
        }
    })]).then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
    }))

6.timeout的使用(设置了在5000毫秒内请求数据  如果没有请求成功就执行错误函数)

    axios.all([axios({
        baseURL:'http://123.789',
        url:'/home/data',
        timeout:5,
    }),axios({
        baseURL:'http://123.456',
        url:'/home/data',
        timeout:5,
        params:{
            type:'lisa',
            page:1
        }
    })]).then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
    }))

7.使用全局的axios对应的配置进行网络请求baseurl和timeout

    axios.defaults.baseURL = 'http://123.789'
    axios.defau;ts.timeout = 5
    axios.all([axios({
        url:'/home/data',
    }),axios({
        baseURL:'http://123.456',
        url:'/home/data',
        params:{
            type:'lisa',
            page:1
        }
    })]).then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
    }))

get请求与params对应

Post请求与data{ key:’aa‘}对应

8.创建对应的axios的实例(每个实例用自己独立的配置,一般都是一个实例)

    const instance = axios.create({
        baseURL:'http://123/456:8008',
        timeout:5000
    })

    instance1({
        url:'/home/data'
    }).then(res =>{
        console.log(res)
    })

    instance1({
        url:'/home/data',
        params:{
            type:'pop',
            page:1
        }
    }).then(res =>{
        console.log(res)
    })

9.1 封装(方法一)

request.js文件中(success和failure都是函数)

    import axios from 'axios'
    export function request(config){
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://123/456:8008',
            timeout:5000
        })
        //发送真正的网络请求
        instance(config).then(res =>{
            console.log(res);
            success(res);
        }).catch(err =>{
            console.log(err);
            failure(err);
        })
    }

使用(成功打印通过接口请求success出去)

    import {request} from './net/request';
    request({
        url:'/home/data',
    },res => {
        console.log((res);
    },err =>{
        console.log(err);
    })

9.2 封装(方法二)

回调函数 request.js文件中

    import axios from 'axios'
    export function request(config){
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://123/456:8008',
            timeout:5000
        })
        //发送真正的网络请求
        instance(config.baseConfig)
        .then(res =>{
            console.log(res);
            config.success(res);
        }).catch(err =>{
            console.log(err);
            config.failure(err);
        })
    }

使用


    import {request} from './net/request';
    request({
        baseConfig:{

        },
        succsee:function(res){

        },
        failure:function(res){
            
        }
    })

9.3 封装(方法三)

    import axios from 'axios'
    export function request(config){
        return new Promise((resolve, reject) =>{
            //1.创建axios的实例
            const instance = axios.create({
                baseURL:'http://123/456:8008',
                timeout:5000
            })
            //发送真正的网络请求
            instance(config)
                .then(res =>{
                    resolve(res);
                }).catch(err =>{
                    reject(err);
                })
        }) 
    }
    request({
        url:'/home/data'
    }).then(res =>{
        console.log(res);
    }).catch(err =>{
        console.log(err)
    })

9.4 封装(方法四)最简单一种

request,js文件

    import axios from 'axios'
    export function request(config){
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://123/456:8008',
            timeout:5000
        })
        //发送真正的网络请求  
        return instance(config)  //因为本身返回的就是promise
    }

使用

    request({
        url:'/home/data'
    }).then(res =>{
        console.log(res);
    }).catch(err =>{
        console.log(err)
    })

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐