axios用法及axios拦截器全局配置

axios

1.基于Promise用于浏览器和node.js的http客户端
2.支持浏览器和node.js
3.支持promise
4.能拦截请求和响应
5.自动转换JSON数据
6.能转换请求和响应数据

axios基本用法

get和delete请求传递参数

• 通过传统的url以?的形式传递参数
• restful形式传递参数
• 通过params形式传递参数
  post和put请求传递参数
• 通过选项传递参数
• 通过URLSearchParams传递参数

 // 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
// 拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })


	// 2.  get 请求传递参数
    // 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    //2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	//2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	//3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })



	// 4  axios 的 post 请求
    // 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	// 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	//5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

axios拦截器

定义：

用于在发送每次请求或者得到响应后，进行对应的处理。

请求拦截器

作用：是在请求发送前进行一些操作
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

编写请求拦截器

axios.interceptors.request.use(function(config){
  //1.任何请求都会经过这一步，在发送请求之前做些什么
  //例如 config.headers.mytoken='nihao'
  //2.一定要return出去
  return config;
},function(err){
//请求错误的话
})

响应拦截器

作用：是在接收到响应后进行一些操作
例如在服务器返回登录状态失败，需要重新登录的时候，跳转到登录页

编写响应拦截器

axios.interceptors.response.use(function(res){
  //1.在接受响应做些什么
  //2.一定要return出去
  return res;
},function(err){
//响应错误的话
})

axios常用全局配置

//#  配置公共的请求地址
axios.defaults.baseURL = '';
//#  配置 超时时间
axios.defaults.timeout = 2500;
//#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';/ application/json