axios学习笔记(2)

axios的基本配置参数

 axios.create({
     baseUrl:xxxx 请求基本域名
     timout:超时时长
     url:请求路径 '/data.json'
     method :请求方法
     headers:{
         token:''
     } 请求头设置
     params:{}//请求参数拼接在url上
     data：{}//请求参数放在请求体上
 })

• axios全局配置
  axios.defaults.timeout=1000
  axios.defaults.baseUrl=‘ssss’

• axios实例配置
  let instance = axios.create({实例配置参数})
  instance.defaults.timeout =3000//修改实例配置

• axios请求配置
  instance.get(’/data.json’,{
  timeout:5000
  })

  3种配置优先级：
  全局配置最低，实例配置中等，请求配置最高

axios拦截器：在请求或响应被处理前拦截

• 请求拦截器

    axios.interceptors.request.use( config=>{
        //在发送请求前做什么
        return config
    },err=>{
        //请求错误的时候做些什么
        return Promise.reject(err);
    })

实际开发的例子，加上token
   let instance = axios.create({})
   instance.interceptors.request.use( config=>{
        //在发送请求前做什么
        config.headers.token = 'sxsxsdasdasr ';
        return config
    },err=>{
        //请求错误的时候做些什么
        return Promise.reject(err);
    })

• 响应拦截器

 axios.interceptors.response.use( res=>{
        //请求成功后对响应数据做处理
        return res
    },err=>{
        //响应错误的时候做些什么
        return Promise.reject(err);
    })

错误处理

    axios.interceptors.request.use( config=>{
        //在发送请求前做什么
        return config
    },err=>{
        //请求错误 一般http状态码以4开头，常见401/404
        return Promise.reject(err);
    })


 axios.interceptors.response.use( res=>{
        //请求成功后对响应数据做处理
        return res
    },err=>{
        //响应错误处理一般http状态码以5开头，一般常见500/502
        return Promise.reject(err);
    })

无论是请求错误，还是响应错误，最终都会被catch捕捉到，我们可以进行catch中进行处理
axios.post('/post',data).then((res)=>{
     console.log(res);
 }).catch(err=>{
     console.log(err);
 })

取消请求

let source = axios.CancelToken.source();
axios.post('/post',{
    cancelToken:source.token
}).then((res)=>{
     console.log(res);
 }).catch(err=>{
     console.log(err);
 })
 
 //取消请求(message 可选)
 source.cancel('cancel http')