Axios 相关知识点

193 阅读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)
        })
    }
}
即可查相应的数据