功能特点

1. 在浏览器中发送XMLhttpRequests请求
2. 也支持在node中发送http请求 自动切换环境
3. 支持promiseAPI
4. 请求拦截和响应拦截
5. 转换请求和响应数据

请求方式

1. axios(config)
2. axios.request(config)
3. axios.get(url,[config])
4. axios.post(url,[data,config])
5. axios.delete(url,[config])
6. axios.head(url,[config])
7. axios.put(url,[data,config])
8. axios.patch(url,[data,config])
9. axios.all([]) 可以放入多个请求数组 返回值也是一个数组 使用 axios.spread 可以将数组[res1,res2]展开为 res1,res2

常见的配置项

• url 请求路径
• method:'get' 请求类型
• baseURL:'' 请求公共路径 跟路径
• transformRequest:[function(data){}] 请求前的数据处理
• transformResponse:[function(data){}] 请求后的数据处理
• headers:'' 自定义请求头
• params:{id:2} URL 查询对象
• paramsSerializer ：function(params){} 查询对象序列化函数
• data:{key:22} request body
• timeout:22 超时事件

// 1.发送request请求
axios
  .request({
    url: '',
    method: 'get',
  })
  .then(res => {
    console.log(res.data);
  });

// 2.发送get请求
axios.get(`<url1>${params}`).then(res => {
  console.log(res);
});

axios
  .get('url', {
    paras: {
      id: 1111,
    },
  })
  .then(res => {
    console.log(res.data);
  });

//发送post请求
axios
  .post('url', {
    name: '213123',
    passwode: 21313,
  })
  .then(res => {
    console.log(res.data);
  });

const baseURL = '10.133.2.32';

axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 20;

// 创建一个实例进行配置
const instance1 = axios.create({
  baseURL: '22',
  timeout: 200,
});
// 使用实例
instance1.get('url', {
  params: {
    id: 111,
  },
});

请求拦截/响应拦截

// 对实例配置拦截
// 请求拦截
axios.interceptors.request.use(('请求成功的回调函数',config)=>{

  // config.header[token]='2222'

  // 开始loading的动画
// 对原来的配置进行修改
// header     认真登入token  请求参数进行转换

},('请求失败回调的函数'.error)=>{})


//响应拦截
axios.interceptors.response.use((res)=> {
// 结束loading
// 处理返回数据

},(err)=>{})

可能这种功能库某一天不维护了 这就回导致你的axios耦合性很高 换框架很难搞 所以需要对axios二次封装

import axios from 'axios'
class HyRequest{
  constructor(baseURL,timeout=10000){
    this.instance=axios.create({
      baseURL,
      timeout
    })
  }
  request(config){
    return  new Promise((resolve,reject)=>{
      this.instance.request(config).then(res=>{
        resolve(res.data)
      }).catch(err=>reject(err))
    })
  }
  get(config){
    return this.request({...config,method:'get'})
  }
  post(config){
    return this.request({...config,method:'post'})
  }
}
export default new HyRequest()