41.axios

• 41.axios
  • 1.axios 概述
  • 2.axios 的常用API
  • 3.axios的响应结果
  • 4.axios 全局配置
  • 5.axios 拦截器

1.axios 概述

1).axios 的基本特性

axios (官网: https//github.com/axios/axios) 是一个基于Promise用于浏览器和node.js的HTTP客户端.

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据

2).axios的基本用法

axios.get('/adata')
	.then(ret => {
      // data 属性名称是固定的
  	  console.log(ret.data)
	})

2.axios 的常用API

• get: 查询数据
• post: 添加数据
• put: 修改数据
• delete: 删除数据

1).GET传递参数

• 通过 URL 传递参数
• 通过 params 选项传递参数

axios.get('/adata?id=123')
	.then(ret => {
      console.log(ret.data)
	})

Restful形式:

axios.get('/adata/123')
	.then(ret => {
      console.log(ret.data)
	})

通过 params 选项传递参数:

axios.get('/adata', {
  params: {
    id: 123
  }
})
  .then(ret => {
     console.log(ret.data)
  })

2).DELETE传递参数

• 参数传递方式与GET类似

axios.delete('/adata?id=123')
	.then(ret => {
       console.log(ret.data)
	})

Restful形式:

axios.delete('/adata/123')
	.then(ret => {
       console.log(ret.data)
	})

通过 params 选项传递参数:

axios.delete('/adata', {
  params: {
    id: 123
  }
})
  .then(ret => {
     console.log(ret.data)
  })

3).POST传递参数

• 通过选项传递参数 (默认传递的是json格式的数据)

axios.post('/adata',{
  uname: 'tom',
  pwd: 123
}).then(ret => {
  console.log(ret.data)
})

• 通过 URLSearchParams传递参数 (application/x-www-form-urlencoded)

const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/test', params).then(ret=>{
  console.log(ret.data)
})

4).PUT传递参数

• 参数传递方式与POST类似

axios.put('/adata/123',{
  uname: 'tom',
  pwd: 123
}).then(ret => {
  console.log(ret.data)
})

3.axios的响应结果

响应结果的主要属性

• data: 实际响应回来的数据
• headers: 响应头信息
• status: 响应状态码
• statusText: 响应状态信息

axios.post('/axios-json').then(ret => {
  console.log(ret)
})

4.axios 全局配置

#  配置默认地址
axios.defaults.baseURL = 'https://api.example.com';
#  配置超时时间
axios.defaults.timeout = 3000;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers['mytoken'] = "aqwwssaafaafafafafafaa"  // 设置请求头
#  配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5.axios 拦截器

1).请求拦截器

• 在请求发送前设置一些信息
  • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

// 添加一个请求拦截器
axios.interceptors.request.use(function(config){
  // 在请求发出之前进行一些信息设置
  # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'nihao';
  # 1.2  这里一定要return   否则配置不成功  
  return config;
}, function(err){
  // 处理响应的错误信息
})

2).响应拦截器

• 在获取数据之前对数据做一些加工处理
  • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

	// 添加一个响应拦截器
    axios.interceptors.response.use(function(res) {
      // 在这里对返回的数据进行处理
      #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })