axios的简单了解

axios的基本使用

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
1.基本用法：

axios({
  url: '',
   method: 'GET'
 }).then(res => {
   console.log(res)
 })

针对get请求中的参数拼接：

axios({
  url:'',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

在使用axios时，配置选项中农包含params和data两者，params是添加到请求字符串中的，用于get请求；data是添加到请求体（body）中的，用于post请求。
2.axios发送并发请求(返回结果为数组)：

axios.all([axios({
  url: 'http://...',
}), axios({
  url:'http://...',
  params: {
    type: 'pop',
    page: 1
  }
})])
  .then(results => {
    console.log(results)
})

创建axios实例

全局配置：
例如：
请求前的数据处理：transformRequuest:[function(data){}]
请求后的数据处理：transformResponse:[function(data){}]
延迟时间：axios.defaults.timeout = 50000
请求配置，在使用axios请求时，单独传入新的配置
实例配置，创建实例时传入的配置
当我们从axios模块中导入对象时，使用的实例是默认的实例
当给该实例设置一些默认配置时，这些配置就被固定下来，但是在后续开发中，某些配置可能会不太一样， 比如某些请求需要使用特定的baseUrl或者timeout，这时候就可以创建新的实例，并且传入属于该实例的配置信息

//创建axios实例
const instance = axios.create({
  baseURL: '',
  timeout: 5000
})
instance1({
  url: ''
}).then(res => {
  console.log(res);
})

对axios的简单封装

新建一个request.js

export function request(config) {
    return new Promise((resolve, reject) => {
    //创建axios的实例
      const instance = axios.create({
        baseURL: '',
        timeout: 5000
      })
	//发送网络请求
      instance(config)
       .then(res => {
           resolve(res)
       })
       .catch(err => {
           reject(err)
       })
    })
  }

实际应用：

request({
  url: ''
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(res)
})

axios拦截器

拦截每次的请求和响应，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。

    // 请求拦截
    instance.interceptors.request.use(config => {
        	const token = sessionStorage.getItem('token')
        	if(token) { //判断是否存在token
        	//如果存在，则统一在http请求的header都加上token
        	//这样后台根据token判断你的登录情况，
        	//此处token一般是用户完成登录后储存到localstorage里的
        	config.headers.authorization = token //请求头加上token
        	}
        return config
    }, err => {
        console.log(err)
    })
        // 比如对config中的一些信息进行更改
        // 在每次发送网络请求时，在页面显示一个请求的图标
        // 某些网络请求（比如登录token），必须携带一些特殊的信息

响应拦截

    // 响应拦截，做统一处理
    instance.interceptors.response.use(res => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if(res.status === 200) {
    //判断是否授权或者登录
   }  	
        return res.data
    }, err => {
    //这里可以对异常状态做统一处理
        console.log(err);
    })