axios学习

axios

• https://www.runoob.com/vue2/vuejs-ajax-axios.html

• https://www.kancloud.cn/yunye/axios/234845

发送get请求

import axios from 'axios'
export default {
    name:'app',
    created(){
        // 1.没有请求参数
        axios.get('http://****').then(res=>{
            consolr.log(res)
        }).catch(err=>{
            console.log(err)
        })
        // 2.有请求参数
        axios.get('http://****',{
            params:{
                type:'detail',
                page:2
            }
        }).then(res=>{
            consolr.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }
}

axios实例、配置

// 创建axios实例
const axiosInstance = axios.create({
    baseURL: 'http://***',
    timeout:3000,   //请求超时时间，
    headers:{
        'Content-Type':'application/x-www-from-urlencoded'  //请求头
    }
})

axiosInstance({
    url:'/params',  //参数
    method:'get',   //请求方式
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

axios封装

import Axios from 'axios'

export default function axios(option){
    return new Promise((resolve,reject)=>{
        const instance = Axios.create({
            baseUrl:'api',
            timeout:3000
        })
        
        instance(option).then(res =>{
            resolve(res)
        }).catch(err =>{
            reject(err)
        })
    })
}

/* 使用 */
axios({
    utl:'/home/data',
    method:'get',
    params:{
        key:value,
        ...
    }
}).then(res =>{
    console.log(res)
}).catch(err =>{
    console.log(err)
})

axios拦截器

应用

1. 发送网络请求时的loading动画

2. 必须登录才能操作，判断token

3. 请求参数的序列化

4. 判断响应失败的报错码，跳转对应页面

5. 数据过滤

   . . .

export default function axios(option){
    return new Promise((resolve,reject)=>{
        ...
        // 请求拦截
        instance.interceptors.request.use(config =>{
            console.log('请求拦截成功')
                ...
            return config
        },err =>{
            console.log('请求拦截失败')
                ...
            return err
        })

        // 响应拦截
        instance.interceptors.response.use(response =>{
            console.log('响应拦截成功')
                ...
            return response.data
        },err =>{
            console.log('响应拦截失败')
                ...
            return err
        })
    })
}

END