axio深入实例以及配置

定义实例instance,使用实例

let instance = new axios.create({
	baseURL:”http:localhost:8080“,
	timeOut:1000
})
instance.get('/data.json').then(res=>{console.log(res)})

axios配置项

axios.create({
	baseURL:"" ，//请求域名，基本地址
	timeOut:"",  //请求超时时间
	url:"", //请求路径
	pa'ramsL:"", //请求参数拼接在url上
	method:"", //请求方法：get,post,put,patch,delete
	data:"",  //请求参数放在请求体
	headers:{
		token:""
	} //请求头
})

axios全局配置

axios.defaults.baseURL = "http://localhost:8080";
axios.defaults.timeOut = 1000

axios实例配置

let instance = new axios.create({
	baseURL:”http:localhost:8080“,
	timeOut:1000
})

axios请求配置

axios.get('./data.json',{
	timeOut:2000
})

优先级：全局配置<实例配置<请求配置

拦截器：包括请求拦截，响应拦截，取消拦截器;

//请求拦截器
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.interceptors.request.use(config=>{
	config.headers={
		auth:trun
	}
	return config
})
//实例 登录接口
let instance = new axios.create()
instance.interceptors.request.use(config=>{
	config.headers.token=""
	return config
})
instance.get("/get").then(res=>{console.log(res)}).cathc(err=>{console.log(err)});
//不需要登录
let instance2 = new axios.create();
instance2.get("/get").then(res=>{console.log(res)}).catch(err=>{console.log(err)})

取消请求

let source = axios.Canceltoken.source()
axios.get("/get",{
	cancelToken = source.token
}).then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(err)
})
//取消请求
source.cancel("cancel http")

错误处理 实际开发中一般统一添加错误处理

let instance = new axios.create({})
    instance.get("/get").then(res=>{
        console.log(res)
    })
    instance.get("/get2").then(res=>{
        console.log(res)
    })
    instance.interceptors.request.use(config=>{
        return config
    },err=>{
        //请求http错误代码 401(请求超时) 400(未找到)
        $("#popup").show()
        setTimeout(() => {
            $("#popup").hide()
        }, 1000);
        return promise.reject(err)
    })
    instance.interceptors.response.use(res=>{
        return res
    },err=>{
        $("#popup").show()
        setTimeout(() => {
            $("#popup").hide()
        }, 1000);
        //响应http错误代码500(服务器错误) 502(重启)
        return Promise.reject(err)
    })