axios应用和配置方法

axios特性

1.常规特性

• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据（在请求的时候，有一些敏感信息需要加密，然后回来的时候可以解密）
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF（客户端常见攻击方式）

2.支持的浏览器

• 谷歌Chrome
• 火狐
• 欧朋
• IE （ie8以上）
• Safari
• 微软Edge

---

axios --> http请求方法

• get 获取数据
• post 提交数据（表单提交+文件上传）
• put 更新数据（所有数据推送到后端）
• patch 更新数据（只将修改的数据推送到后端）
• delete 删除数据
• heade 只获取头部信息

axios基础用法 2种形式的写法

以 get 为例子：

1. 写法1

axios.get('/url').then( (res)=>{})

2. 写法2

  axios({
      method:'get',
      url:'/url'
    }).then((res)=>{
     
    })

传参数形式 params和data的区别

params形式将拼接在url 里

axios.get('/url',{params:{id:1}}).then( (res)=>{})
// http://localhost:8080/#/axios?id=1

data形式参数会在请求体里

  axios({
      method:'get',
      url:'/url',
      data:{
			id:2
		}
    }).then((res)=>{
     
    })

并发请求（多个请求）处理

用法例子：

axios.all([
 	   axios.get('/swiper'),
       axios.get('/activitys'),
       axios.get('/seconds'),
 ]).then(axios.spread((swiperData, activityData, secondsData) => {
     
 }));

axios的配置参数有哪些

axios.create({
  basseURL:'',//请求的域名，基本地址
  timeout:1000,//请求超时时长
  url:'', //请求路径
  method:'',  //请求方法
  headers:{
    token:''  //一般都有登录人信息
  },//请求头
  params:{},//请求参数将拼接在url 里
  data:{}  //请求参数会在请求体里
})

axios—全局配置—实例配置—请求配置

1.全局配置

例子：

axios.defaults.baseURL = 'http://';    //全局配置baseURL 
axios.defaults.timeout= 3000;    //全局配置请求超时时长

2.实例配置

例子：

 let kk = axios.create();
 kk.default.timeout = 3000;

3.请求配置

例子：

  kk.get('/data',{
      timeout:5000
    })

axios拦截器

1.请求拦截器

• 注意是用request

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

2.响应拦截器

• 注意是用response

axios.interceptors.response.use((response) => {
    return response;
 }, (error) => {
    // 处理错误的响应
    return Promise.reject(error);
 });

3.取消拦截器

//1.声明拦截器后
let kk = axios.interceptors.request.use((request) => {
    return request;
 }, (error) => {
    return Promise.reject(error);
 });
 //2.取消方法
 axios.interceptors.request.eject(kk)

错误处理

1. 利用catch方法 获取

axios.get('/data',{
      timeout:5000
    }).catch((err) => {
		//错误方法
})

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

• 请求错误统一处理

axios.interceptors.request.use((request) => {
    return request;
 }, (error) => {
 	//请求错误，一般http状态码以4开头，常见：401超时，404  not found
 	//添加提示
 	alert(err)
    return Promise.reject(error);   //错误
 });

• 响应错误统一处理

axios.interceptors.response.use((response) => {
    return response;
 }, (error) => {
    // 响应错误，一般http状态码以5开头，常见：500系统错误，502系统重启
    //添加提示
 	alert(err)
    return Promise.reject(error);
 });

axios进阶用法（取消请求）

实际应用不多，只做了解就可以，待更新…

---

axios进一步封装，在项目中的实际应用

待更新…