vue中使用axios

素颜马尾好姑娘i 2024-04-17 18:58 12阅读 0赞

\#\#Axios是什么？  
1.支持Promiss API  
2.拦截请求和响应  
3.转换请求数据和响应数据  
4.取消请求  
5.自动转换json数据  
6.客户端支持防御XSRF

\#\#课程介绍  
Axios基础用法(get,post,put等请求方法)  
Axios进阶方法(实例，配置，拦截器，取消请求等)  
Axios进一步封装，在项目中的实际应用

\#\#\#Axios的基础用法  
get:获取数据  
post:更新数据（表单提交+文件上传）  
put:更新数据（所有数据都会推送到后端）  
patch:更新数据（直接将修改的数据推送到后端）  
delete:删除数据

二种写法
    (1)get
    1.   axios.get('/data.json',{
    	   	parmas:{
    			id:12
    			}
    	}).then(res =>{
    		console.log(res)
    	})
    
    2.   axios({
    	     method:'get',
    	     url:'/data.json',
    	     params:{
    		     id:12
    	     }
           }).then(res =>{
    		   console.log(res)
    	   })
    
    (2)post
    	//applicition/json （）
    	let data = {
    		id:12	
    	}
    	axios.post('/data.son',data).then(res => {
    		console.log(res)
    	})
    
    	
    	axios({
    		method:'post',
    		url:'/data.json',
    		data:data
    	}).then(res =>{
    		console.log(res)
    	})
    
    	//表单提交
    	let formData = new FormData()
    	for(let key in data){
    		formData.append(key,data[key])
    	}
    	axios.post('/post',formData).then(res => {
    		console.log(res)
    	})
    	
    	(3)put
        axios.put('/put',data).then(res => {
          console.log(res)
        })
        （4）patch请求
        axios.patch('/patch',data).then(res => {
          console.log(res)
        })
    
        （5）delete请求
        axios.delete('/delete',{
          params:{
            id:12
          }
        }).then(res => {
          console.log(res)
        })
    
        axios.delete('/delete',{
          data:{
            id:12
          }
        }).then(res => {
          console.log(res)
        })
    
        axios({
          method:'delete',
          url:'/delete',
          params:{},
          data:{}
        }).then(res => {
          console.log(res)
        })

\#\#\#axios并发请求  
/\*  
并发请求：同时进行多个请求，并统一处理返回值

*/
    import axios from 'axios'
    export default {
      name: 'axios2-3',
      created(){
        //axios.all()   axios.spread()
        axios.all([
            axios.get('/data.json'),
            axios.get('/city.json'),
    
        ]).then(
            axios.spread((dataRes,cityRes) => {
                console.log(dataRes)
                console.log(cityRes)
            })
        )
      },
    }

\#\#\#axios实例  
//axios实例  
//后端接口地址有多个，并且超时时长不一样  
// let arr = \[\]  
// let arr = new Array()  
import axios from ‘axios’  
export default \{  
name: ‘axios3-1’,  
created()\{  
let instance = axios.create(\{  
baseURL:‘http://localhost:8080’,  
timeout:1000  
\})  
let axios2 = axios.create(\{  
baseURL:‘http://localhost:9090’,  
timeout:5000  
\})  
instance.get(’/data.json’).then(res => \{  
console.log(res)  
\})  
axios2.get(’/data.json’).then(res => \{  
console.log(res)  
\})

}
    }

\#\#\#axios有哪些配置参数  
created()\{  
//axios 配置参数有哪些  
axios.create(\{  
baseURL:‘http://localhost:8080’,//请求的域名，几本地址  
timeout:1000, // 请求的超时时长（ms毫秒）  
url:’/data.json’, //请求路径  
method:‘get,post,put,patch,delete’, //请求方法  
headers:\{  
token:’’  
\}, //设置请求头  
params:\{\}, //请求参数拼接在url上  
data:\{\}, //请求参数放在请求体里  
\})  
axios.get(’/data.json’,\{  
params:\{  
id:12  
\}  
\})

//1.axios全局配置
        axios.defaults.timeout = 1000
        axios.defaults.baseURL = 'http://localhost:8080'
        //2.axios实例配置
        let instance = axios.create()
        instance.defaults.timeout = 3000
        //3.axios请求配置
        instance.get('/data.json',{
            timeout:5000
        })
        //优先级 全局配置最低 实例配置其次 请求配置最高
    
    
        //实际开发 
        //有两种请求接口： 
        //http:localhost:9090
        //hhtp:localhost:9091
        let instance = axios.create({
            baseURL:'http:localhost:9090',
            timeout:1000
        })
        let instance1 =  axios.create({
            baseURL:'http:localhost:9091',
            timeout:5000
        })
        //baseURL,timeout,url,method,parmas
        instance.get('/contactList',{
            params:{
                id:12
            }
        }).then(res => {
            console.log(res)
        })
    
        //baseURL,url,timeout:8000,method,params
        instance1.get('/orderList',{
            timeout:8000,
            params:{}
        }).then(res => {
            console.log(res)
        })

\#\#\#拦截器  
//拦截器：在请求或相应被处理签拦截他们  
//请求拦截器，相应拦截器  
created()\{  
//请求拦截器  
axios.interceptors.request.use(  
config => \{  
//在发送请求前做些什么

return config;
          },error => {
            //在请求错误的时候做些什么
    
            return Promise.reject(err)
          })
    
          //响应拦截器
          axios.interceptors.response.use(res =>{
            //请求成功对响应数据做处理
            return res
          },err => {
            //响应错误做些什么
            return Promise.reject(err)
          })
          //取消拦截器(了解)
          let interceptors = axios.interceptors.request.use(
            config => {
              config.header = {
                auth: true
              }
              return config
            })
            axios.interceptors.request.eject(interceptors)
    
            //例子 登录状态(token:'')
            //需要登陆的接口
            let instance = axios.create({})
            instance.interceptors.request.use(
              config => {
                config.headers.token = ''
                return config
            })
            //不需要登录的接口
            let newInstance = axios.create({})
    
            //移动端开发
            let instance_phone = axios.create({})
            instance_phone.interceptors.request.use(
              config => {
                $('#modal').show()
                //显示等待弹窗
                return config
            })
    
            instance_phone.interceptors.response.use(res => {
              $('modal').hide()
              //关闭等待弹窗
              return res
            })
      }

\#\#\#axios错误处理  
//错误处理：请求错误时进行的处理  
created()\{  
axios.interceptors.request.use(consfig => \{  
return config  
\},err => \{  
return Promise.reject(err)  
\})  
axios.get(’/data.json’).then(res => \{  
console.log(res)  
\}).catch(err => \{

})
    
    
      axios.interceptors.response.use(consfig => {
          return config
      },err => {
          return Promise.reject(err)
      })
    
        //例子：实际开发过程中，一般添加一个统一的错误处理
        let instance = axios.create({})
        instance.interceptors.request.use(config => {
            return config
        },err => {
            //请求错误，一般http状态码以4开头，常见401超时，404not found
            $('#modal').show()
            setTimeout(() =>{
               $('#modal').hide() 
            },2000)
            return Promise.reject(err)
        })
    
        instance.interceptors.response.use(res => {
            console.log(res)
        },err => {
            //响应错误处理,一般http状态码以5开头，500系统错误 502系统重启
            $('#modal').show()
            setTimeout(() =>{
               $('#modal').hide() 
            },2000)
            return Promise.reject(err)
        })
    
        instance.get('/data.json').then(res => {
            console.log(res)
        })

\#\#\#axios取消请求  
//用于取消正在进行的http请求（了解）

created()\{  
let source = axios.CancelToken.source()  
axios.get(’/data.json’,\{  
cancelToken:source.token  
\}).then(res => \{  
console.log(res)  
\})

//取消请求 (message可选)
      source.cancel('cancel http')
    
      //什么情况下可能用到取消请求
      //商城 3-5秒
    },

\#\#axios封装拓展  
可以给请求添加统一的loading  
在header添加token鉴权  
添加统一的错误处理（比如登录超时等）