axios基础配置

axios的作用

axios是react和vue推荐使用的http库，发ajax用的

axios的基本使用

1. axios的返回结果是一个promise实例对象

2. 他的回调不同于promise的value和reason分别叫做response和err

3. axios的成功值是一个axios封装的response对象.服务器返回的真正数据在response.data中

4. axios需要携带query参数的话要写在params中,但是params参数只能写在请求地址中

//GET请求

//完整版写法
<script type='text/javascript' src='./axios.js'></script>
const res = axios({
    
    
	url:'http://localhost:5000/persons',//请求地址
	methods:'GET'//请求方式
    params:{
    
    id:...}//query参数发送方式
})
log(res)//axios返回值是一个promise实例
res.then(
	response => {
    
    log(response.data)}
    err => {
    
    log(err)}
)

//精简版写法
axios.get('http:.......',{
    
    params:{
    
    id:...}}).then(
	response =>{
    
    }
	err =>{
    
    }
)
//只要成功的写法
const res = await axios.get('http:/...')

//POST请求

//完整版
axios({
    
    
    url:'http://...',
    methods:'POST',
    data:{
    
    name:...,age:...}//json格式的参数
    data:`name=..&age=..`//urlencoded格式的参数
})

//精简版
axios('http:...',{
    
    name:..,age:..}).then(
	response => {
    
    }
    err => {
    
    }
)

axios常用配置项

axios可以把默认配置好

//配置默认属性
axios.baseURL = 'http://...'//URL一定是大写
axios.defaults.timeout = 2000
axios.defsults.headers = {
    
    school:'atguigu'}

axios({
    
    
	url:'/test'//不需要再写baseURL了
})

axios.create

应用场景:项目中有部分接口需要的配置和另一部分的配置不一样,需要克隆一个新的出来

比如axios.defaults.baseURL 定义好后想给别的url发请求就不行了

注意:克隆出来的axios不是完全和axios一样,他不能 取消请求,也不能 批量发送请求其他语法都一样

const axios2 = axios.create({
	timeout:1000,
	baseURL:http://...
})

axios的拦截器

注意:一定要在使用axios之前设置拦截器

拦截器是什么？------在真正发请求执行前的一个回调函数

作用：对所有的请求做统一的处理：追加请求头，参数等等

//请求拦截器-----发送请求前执行的一个函数
1axios.interceptors.request.use((config)=>{
    
    
	return config
	
})

//响应拦截器-----得到响应s前执行的一个函数
axios.interceptors.response.use(
	response => {
    
    
     	if(Date.now()%2===0)return response.data
        else return '此时不能得到响应'
    }
    error =>{
    
    
    	//由于是promise,需要指定错误的返回值
    
    	return Promise.reject(err) 
    }
)