asiox封装，怎么使用svg,

怎么使用svg
icon图标：img，雪碧图,base64(将图片转换成base64),
​ 字体图标,svg:可以灵活配置
svg: 有单个图标

通过img引入svg
通过直接插入svg
通过样式来调整
.fen {
      width:50px;
      fill:#f00;
}

多个svg图合成：svg sprites
1.从iconfont挑选图标加入购物并下载, 2.解压打开html,找到symbol复制其中的svg代 码
3. 粘贴到vue项目public中的index.html中 4.使用svg

 <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-挑选的图标名"></use>
 </svg>

asiox封装
axios封装: 基本不用封装，只是对请求的接口地址，超时，报错处理

安装axios
npm i axios -S  //i 代表install

数据请求有5种，先从最原始的post和get
1.post和get简洁语法

//get语法语法
axios.get('/user', {
    params: {
      ID: 444444   
   }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  //post请求语法
   axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  }); 
  function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
//可以用axios同时请求多个接口，类似于Promise.all()
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

2. axios通过配置对象来请求数据

//post请求
axios({
  url:'接口地址',
  baseURL：‘接口默认前缀地址’
  method:'post',
 // data:{  }, //传参,注意：post请求有可能会用qs库去转换
  data:qs.stringify(obj)
  headers:{'content-tpye':'application/x-www-form-urlencoded',......}, //请求头配置
});

3.axios的默认配置

axios.defaults.baseURL = '默认接口域名url';
axios.defaults.headers['x-token'] = token值;  //添加token
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';

4. 创建实例

const instance = axios.create({
  baseURL: '默认接口域名url',
  timeout:3000
});
//instance.defaults.timeout = 3000;  //给实例添加默认超时时间

5.axios拦截器 响应拦截和请求拦截

// 添加请求拦截
axios.interceptors.request.use(config => {
    config.headers['x-token'] = 'aassafasfas2332dsgsgsd'
    console.log('请求被拦截',config)
    return config;
}, _error => {
    return Promise.reject('请求出错，请检查')
})
// 添加响应拦截
axios.interceptors.response.use(res => {
    console.log('响应拦截')
    return res;
}, error => {
    return Promise.reject('出错啦',error)
})