Axios基础学习

定义

• 是一个基于promise的http库
• 可以用于浏览器和node.js

特性

• 支持promise api
• 自动转换json
• 客户端支持xsrf
• 拦截请求数据和响应数据
• 取消请求

vue项目创建

 //安装3版本脚手架

npm install -g @vue/cli   

 //查看安装版本
vue -V  

 //创建一个项目
vue create axios-vue

出现这个界面使用默认或者自定义 

根据需要选择选项

创建成功

//安装axios

yarn add axios

axios请求方法

get 获取数据

axios.get('/data.json',{

    params:{
        id:12
    }


}).then((res)=>{

    consloe.log(res)
    })


axios.({
    url:'data.json',
    method:'get',
    parmas：{

        id:12
    }

}).then((res)=>{

    consloe.log(res)
})

post 提交数据（表单提价+文件上传）

//application/json
let data = {id:12}
axios.post('post',data).then(res=>{

    console.log(res)


})

axios.({
    
    method:'post'
    url:'/post',
    param: data,
    
}).then(res=>{

console.log(res)
})

//form-data 表单提交
let formData = new FormData()

for(let key in data){

    formData.append(key,data[key])

}
    

axios.({
    
    method:'post'
    url:'/post',
    param: formData ,
    
}).then(res=>{

console.log(res)
})

put 更新数据（所有数据更新到后端）

axios.({
    
    method:'put'
    url:'/put',
    param: data,
    
}).then(res=>{

console.log(res)
})

patch 更新数据（只将修改的数据更新）

axios.({
    
    method:'patch'
    url:'/patch',
    param: data,
    
}).then(res=>{

console.log(res)
})

delete 删除数据

//使用parmas参数会和get一样拼接在参数上
axios.delete('delete',{

    url:'delete',
    params:{
        id:12
    }

}).then((res)=>{

    consloe.log(res)

})

//使用data参数会和post一样拼接在参数上
axios.delete('delete',{

    url:'delete',
    data:{
        id:12
    }

}).then((res)=>{

    consloe.log(res)

})

axios实例便于统一配置

let instance = axios.cretae({

       baseURL:'http://localhost:8080',
       timeout: 1000,
           url: '/data.json'
       method : get,post,put,delete,patch,
       headers : {

            token : ''
        },
        params:{},
        data :{}
       


})

let instance2 = axios.cretae({

       baseURL:'http://localhost:9090',
       timeout: 500
       url: '/data.json'
       method : get,post,put,delete,patch,
       headers : {

            token : ''
        },
        params:{},
        data :{}

})

axios 全局配置

axiois.defaults.timeout = 1000
axiois.defaults.baseURL= 'http://localhost:8080'

axios 实例配置

let instance = axios.create();
 instance.defaults.timeput=500

axios 请求配置

insttance.get('/data.json',{

    timeout : 500

})

拦截器

在请求或相应处理前做些什么

//请求拦截器
axios.interceptors.request.use(
    config=>{
        //在发送请求前做些什么
        return config
        
    },err=>{

        //在请求错误的时候做些什么
        return promise.reject(err)
    }

)

//响应拦截器

axios.interceptors.response.user({

    res=>{
        //请求成功对响应做什么
        return res;
    
    },err=>{
        
        //响应错误做什么
         return promise.reject(err);
    }

})