axios在react里面的使用

安装axios

npm install axios -S

创建axios和使用axios

一般我们将axios的拦截器的代码是放在api/config里面的

 //创建一个新的axios
    const instance = axios.create({
        baseURL: 'http://localhost:3000'
    });

    //使用instance发请求
    //方式一
    instance({
        url: '/posts'
    })
    //方式二
    instance.get('/posts')

一般情况下我们都是直接引入axios，直接使用即可，但是现在为什么需要用create创建呢？
原因如下：
axios create(config)
a.根据指定配置创建一个新的 axios，也就是每个新 axios都有自己的配置
b.新 axios只是没有取消请求和批量发请求的方法，其它所有语法都是一政的
c.为什么要设计这个语法?

需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样，如何处理 

解决:创建2个新axios，每个都有自己特有的配置，分别应用到不同变求的接口请求中

axios的拦截器

一个最基础的错误拦截案例

import axios from 'axios';

export const baseUrl = 'http://localhost:3000';

// axios的实例及拦截器配置
const axiosInstance = axios.create({
  baseURL: baseUrl
});

axiosInstance.interceptors.response.use(
  res => res.data,
  err => {
    console.log(err, "网络错误");
  }
);

export {
  axiosInstance
};

一个最基本的token认证拦截

import Axios from 'axios'

Axios.interceptors.request.use(function (config) {
  let token = window.localStorage.token;
  if (token) {
    config.headers.Authorization = `token ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error);
});

Axios.interceptors.request.use(function (config) {
  return config
}, function (error) {
  // 如何在这里加入react中的路由转跳？
  return Promise.reject(error);
});

在vue里面的axios拦截案例

jsVue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)
注：qs，使用axios，必须得安装 qs，所有的Post 请求，我们都需要 qs,对参数进行序列化。

在 request 拦截器实现

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 6000
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
//在 response 拦截器实现

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

上面这个vue的拦截例子，做了request请求拦截和response响应拦截，其实vue和react里面的拦截代码都是一样的，如果需要使用，可以直接拿过来用即可。

axios拦截后直接路由跳转

import Axios from 'axios'
import {HashRouter} from 'react-router-dom'

Axios.interceptors.request.use(function (config) {
  let token = window.localStorage.token;
  if (token) {
    config.headers.Authorization = `token ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error);
});

Axios.interceptors.request.use(function (config) {
  return config
}, function (error) {
  const router = new HashRouter()
  //路由跳转
  router.history.push('/')
  return Promise.reject(error);
});