axios 请求与封装

axios 请求(get,post,put,patch)

get请求的两种方法：

// http://localhost:8080/data.json?id=12
axios.get('/data.json', {
    params: {
        id:12
    }
}).then((res) => {
    console.log(res)
})
axios({
    method:'get',
    url:'/data.json',
    params: {
        id:12
    }
}).then(res=>{
    console.log(res)
})

// post

// from-data 表单提交（图片上传、文件上传）
// application/json 大多数使用的，传递json数据
let data = {
    id:12
}
axios.post('/post', data).then(res=>{
    console.log(res)
})
axios({
    method:'post',
    url:'/data',
    data:data
}).then(res=>{
    console.log(res)
})

// from-data 表单提交

let formData = new FormData()
for(let key in data) {
    formData.append(key, data[key])
}
axios.post('/post', formData).then(res=>{
    console.log(res)
})

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

// axios.all()   axios.spread()
axios.all(
    [
        axios.get('/data.json'),
        axios.get('/city.json')
    ]
).then( // 分割不同请求的返回值
    axios.spread((dataRes, cityRes) => {
        console.log(dataRes, cityRes)
    })
)

 axios实例， 基本的参数：
 

import axios from 'axios'
export default {
    name:'axios9-1',
    created() {
        let instance = axios.create({
            baseURL:'http://localhost:8080',  //请求的基本地址
            timeout:1000,  // 请求超时时长ms
            url:'/data.json', // 请求路径
            method：'get,post,put,patch,delete',  // 请求方法
            headers: {
                token:'abc'
            },  // 请求头
            params: {}, // 将请求参数拼接在url上
            data:{} // 把请求参数放在请求体里面
        })
        instance.get('/data.json').then(res=>{
            console.log(res);
        })
        
        // 1.axios 全局配置-优先级低
        axios.defaults.timeout = 1000
        axios.defaults.baseURL = 'http://localhost:8080'
        // 2.axios 实例配置-优先级中
        let instance = axios.create()
        instance.defaults.timeout = 3000
        instance.defaults.baseURL = 'http://localhost:8080'
        // 3.axios 请求配置-优先级高
        instance.get('/data.json', {
            timeout:5000
        })
    },
}

// 实际开发中
let instance = axios.create({
    baseURL = 'http://localhost:8090',
    timeout: 1000
})
let instance2 = axios.create({
    baseURL = 'http://localhost:8080',
    timeout: 3000
})
// instance包含的参数：baseUrl,timeout,url, method, params
instance.get('/contactList', {
    params: {}
}).then((res)=>{
    console.log(res)
})
// instance包含的参数: baseUrl, timeout,method,params.
instance2.get('/orderList', {
    timeout: 10000
}).then((res)=>{
    console.log(res)
})

==================拦截器的使用==============================

axios 拦截器

<script>
//在请求或响应被处理前拦截他们。
// 请求拦截器，响应拦截器
import axios from 'axios'
export default {
    created() {
        // 请求拦截器
        axios.interceptors.request.use(config=> {
            // 发送请求前，做些什么
            return config
        }, err=> {
            // 请求错误的时候，做些什么
            return Promise.reject(err)
        })
        // 响应拦截器
        axios.interceptors.response.use(res=>{
            // 请求成功对响应数据做处理
            return res
        }, err=> {
            // 响应错误，做些什么
            return Promise.reject(err)        
        })
        // 取消拦截器（了解）
        let interceptors = axios.interceptors.request.use(config=> {
            config.headers ={
                auth:true
            }
            return config
        })
        // 取消上面定义的拦截器
        axios.interceptors.request.eject(interceptors)
        
        
        // 下面then中的res，就是上面返回的res
        axios.get().then(res=> {
            
        }).catch(err=> { // 请求失败处理
            
        })
        
        // eg: 需要登录状态(token:'')
        let instance = axios.create({})
        instance.interceptors.request.use(config => {
            config.headers.token = 'abc'
            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
        })
    }
}
<script>

 

axios 错误处理
// 请求错误时，进行的处理
created() {
	axios.interceptors.request.use(config => {
		return config	
	}, err=> { // 请求错误
		return Promise.reject(err)
	})
	axios.interceptors.response.use(res => {
		return res	
	}, err=> { // 响应错误
		return Promise.reject(err)
	})
	axios.get('/data.json').then((res)=>{
		console.log(res)
	}).catch(err=> { // 上面2个错误处理，都将进入catch处理
		console.log(err)
	})
	
	// eg:实际开发过程中，添加统一错误处理
	let instance = axios.create({})
	instance.interceptors.request.use(config => {
		return config	
	}, err=> { // 请求错误
		// 请求错误，一般错误码以4开头：401超时，404not found
		$('#modal').show()
		setTimeout(()=> {
			$('#modal').hide()
		}, 2000)
		return Promise.reject(err)
	})
	instance.interceptors.response.use(res => {
		return res	
	}, err=> { // 响应错误处理，一般http状态码，以5开头，500系统错误，502系统重启
		$('#modal').show()
		setTimeout(()=> {
			$('#modal').hide()
		}, 2000)
		return Promise.reject(err)
	})
	// 不需要单独做错误处理，如需要可单独添加catch处理
	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)
	}).catch(err=>{
		console.log(err)
	})
	// 取消请求(message 是可选)
	source.cancel('cancel http')
	
	// 可能用到取消请求
}