axios

最新推荐文章于 2024-06-28 14:33:15 发布

THE LONER

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量98

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_44912359/article/details/129037460

版权

axios基础

专注于网络请求的库
    代码
        axios({
            method: 'POST',
            url:'',
            //查询字符串
            params: {},
            //请求体
            data:{},
        }).then((result) => {

        })
        document.addEventListener('button').addEventListener('click',async ()=>{
            const {data:res} = await axios({       返回真实数据，必须有async和await
                method: 'POST',                 :为解构的重命名
                url:'',
                //查询字符串
                params: {},
                //请求体
                data:{},
            })
        })
        axios.get(url,{params:{}})
        axios.post(url,{data:{}})

模块化

把axios挂载为vue的公共方法
        main.js文件中
            import axios from 'axios'
            Vue.prototype.$http = axios
        各组件的调用
            this.$http.get(url,{data:{}})
        配置默认请求路径
            axios.defaults.baseURL = '请求的根路径'    //之后的请求只需要写出接口即可
        方便维护，不必重复导入
axios封装模块
        import axios from 'axios'
        const axiosTaoBao = axios.create({
            baseURL: 'http://api.taobao.com
        })
        const axiosJb = axios.create({
            baseURL: 'http://api.jingdong.com
        })
        export default {axiosTaoBao, axiosJb}
        axiosTaoBao.get()

拦截器

axios请求拦截器
        使axios请求统一携带token
        const whiteApiList = ['/login','/logout']
        myAxios.interceptors.request.use(function(config){
            // 为请求头添加Authorization 字段
            if(!whiteApiList.includes(config.url){
                config.header.Authorization = "Bearer "+ store.state.token
            }
            return config
        }, function(error){
            return promise.reject(error)
        })
    效应拦截器
        返回的数据先经过固定函数筛选