Axios 配置

192 阅读1分钟

1.Axios 下载

    npm install axios --save

2.封装Axios

    在项目中src下面创建一个文件夹utils在文件夹中创建request.js配置文件
    1.引入axios
        impotr axios from 'axios'
    2.新建axios实例
      const request=  axios.create({
           baseURL:'/', 请求地址
           timeout:3000  超时时间
       })
    3.添加拦截器:
        请求拦截
    request.interceptors.request.use(confing=>{
    //在发送之前做什么
        return config;
    },error=>{
        //在请求失败做什么
        return Promise.reject(error)
    });
    响应拦截:
    request.insterceptors.reponse.use(respones=>{
        //响应成功之前做些什么
        return response
    },error=>{
         //响应失败做些什么
        return Promise.reject(error)
    });
    4.导出对象
       export default request

3.请求数据

    1.创建api文件夹
        再里面创建一个test.js文件
    2.导入request.js文件
       impotr request from '../utils'
    3.请求方式1
        request.get('json数据地址').then(response=>{
            console.log(response)
        }).catch(error=>{
            console.log(error)
        })
        请求方式2:
        request({
            ///请求方式
            type:'get',
            ///请求地址
           url:'json数据地址',
        }).then(response=>{
            console.log(response)
        }).catch(error=>{
            console.log(error)
        })
        请求方式3:
        expotr deault{
            gitData(){
                return request({
                    type:'get',
                     url:'json数据地址'
                })
            }
        }

4.在需要用到数据的组件引入

    import  testApi from '../api/test'
    created(){

        this.fet()
    },
    methods:{

        fet(){
            testApi.getDate().then(response=>{
                console.log(response)
            }).catch(error=>{
                console.log(error)
            })
       }
    }
    即可查相应的数据