React之axios的使用以及二次封装

一、安装axios

通过命令yarn add axios或者npm install axios来安装axios

yarn add axios

npm install axios

二、页面引入并使用

1、Axios支持多种请求方式

1. axios（config）
2. axios.request(config)
3. axios.get(url , config)
4. axios.delete(url , config)
5. axios.head(url , config)
6. axios.post(url , data , config)
7. axios.put(url , data , config)
8. axios.patch(url , data , config)

2、请求方式的使用

1、axios发送基本的网络请求
axios默认的网络请求方法是get请求

    axios({
    
    
      url: "https://httpbin.org/get",
      params: {
    
    
        name: "why",
        age: 18
      }
    }).then(res => {
    
    
      console.log(res);
    }).catch(err => {
    
    
      console.error(err);
    });
    
	axios({
    
    
      url: "https://httpbin.org/post",
      data: {
    
    
        name: "kobe",
        age: 40
      },
      method: "post"
    }).then(res => {
    
    
      console.log(res);
    }).catch(err => {
    
    
      console.error(err);
    })
	

2、axios发送get/post

	axios.get("https://httpbin.org/get", {
    
    
      params: {
    
    
        name: "lilei",
        age: 30
      }
    }).then(console.log);

    axios.post("https://httpbin.org/post", {
    
    
      name: "lucy",
      age: 28
    }).then(console.log);

    axios.request({
    
    

    })

3、使用同步（await）异步（async）调用axios

async componentDidMount(){
    
    
	const result = await axios.get("https://httpbin.org/get" ,{
    
    
		params:{
    
    
			name:'aaa',
			age:12
		}
	});
}

4、使用try…catch…捕获异常

    try {
    
    
      const result = await axios.get("https://httpbin.org/get", {
    
    
        params: {
    
    
          name: "aaa",
          age: 12
        }
      });
      console.log(result);
    } catch(err) {
    
    
      console.log(err);
    }

5、axios.all()的使用，调用两个axios方法

 	const request1 = axios({
    
    
      url: "/get",
      params: {
    
     name: "why", age: 18 }
    })

    const request2 = axios({
    
    
      url: "/post",
      data: {
    
     name: "kobe", age: 40 },
      method: "post"
    })

    axios.all([request1, request2]).then(([res1, res2]) => {
    
    
      console.log(res1, res2);
    });

6、设置定时器

	const promise1 = new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        resolve("promise1")
      }, 1000);
    });
    const promise2 = new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        resolve("promise2")
      }, 3000);
    });

    Promise.all([promise1, promise2]).then(res => {
    
    
      console.log(res);
    });

7、创建新的实例

const instance1 = axios.create({
    
    
	baseURL:"https://httpbin.org",
	timeout:5000,
	headers:{
    
    
		......
	}
})

8、请求响应拦截

//请求拦截
axios.interceptors.request.use(config => {
    
    
   // 1、发送网络请求时，在界面中间位置显示loading的组件

    // 2、某一些请求要求用户必须携带token，如果没有读取到，那么直接跳转到登录页面

    // 3、params/data序列化的操作
    return config;
}, err => {
    
    
    
})
//响应拦截
axios.interceptors.response.use(res => {
    
    
  return res.data;
}, err => {
    
    
  if (err && err.response) {
    
    
    switch (err.response.status) {
    
    
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});      

三、axios二次封装

1、建立文件夹，命名为service，新建两个文件 config.js和request.js

2、congfig.js文件中配置请求接口中的基础路径（BASE_URL）以及以及超时时间（TIMEOUT）

const devBaseURL = "https://httpbin.org"; //开发环境
const proBaseURL = "https://production.org"; //生产环境
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;
export const TIMEOUT = 5000;

3、request接口中进行封装

import axios from 'axios';

import {
    
     BASE_URL, TIMEOUT } from "./config";

const service= axios.create({
    
    
  baseURL: BASE_URL,
  timeout: TIMEOUT
});

// http request 拦截器
service.interceptors.request.use(config => {
    
    
  // 发送网络请求时, 在界面的中间位置显示Loading的组件,使用ant-design插件，这里不再赘述
  //请求携带的信息
	config.headers = {
    
    
		'Content-Type':'application/json',
		'x-token': 需要使用的token,
		...config.headers,
	};
  return config;
}, err => {
    
    
	//...关闭加载loading的组件，显示消息提示弹窗
	return err;
});

// http response 拦截器
service.interceptors.response.use(res => {
    
    
  return res.data;
}, err => {
    
    
  if (err && err.response) {
    
    
    switch (err.response.status) {
    
    
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});

export default service;